webpack插件plugins

最新推荐文章于 2023-03-04 22:32:53 发布

希望大佬文章可以白嫖

最新推荐文章于 2023-03-04 22:32:53 发布

阅读量564

点赞数

分类专栏： webpack 文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/shiyibushiwei/article/details/125783555

版权

webpack 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webpack中文文档

https://www.webpackjs.com/concepts/

插件plugins

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

下载模块

cnpm install html-webpack-plugin -D

配置，在webpack.config.js

打包后的main.js在指定文件./src/index.html中自动引入

//引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 通过 npm 安装
 // 插件
    plugins: [
        new HtmlWebpackPlugin({
            //配置一个标题，可以在生成的html文件中引入
            title: "好谷学堂",
            template: './src/index.html'
        })
    ],

在生成的html中引入定义的title

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
       kPlugin.o <%= htmlWebpacptions.title %>
    </title>
</head>

延迟js加载的方法

//defer 给script标签添加defer属性可以演出js文件的加载
//async 给script标签添加defer属性可以演出js文件的加载
<script async src="main.js"></script>

webpack.config.js总代码

//路径模块
const path = require("path")
// 插件、自动生成html，设置titile
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
    // 入口--打包从那个文件开始
    entry: "./src/main.js",
    // 出口--打包之后的文件名字
    output: {
        // path.resolve("a","b")   a/b
        path: path.resolve(__dirname, 'dist'),  //配置路径
        filename: 'main.js'  //指定一个输出的文件
    },
    // 配置css、less、scss、img打包规则
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /\.(png|jpg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {}
                }
            ]
        }]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({
            title: "好谷学堂",
            template: './src/index.html'
        })
    ],
    // 打包模式
    mode: "development",
    // 自动打开
    devServer: {
        open: true,
        host: "localhost",
        port: 9527
    }

}