webpack4.15.1 学习笔记(九) — 11个基础的插件使用

处理 webpack 在编译过程中的某个特定任务的功能模块，plugins 选项用于以各种方式自定义 webpack 构建过程。其中webpack 附带了各种内置插件，可以通过 webpack.[plugin-name] 访问这些插件。

webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。

html-webpack-plugin

简化了html文件的创建，以便为webpack包提供服务。该插件将生成一个 HTML5 文件，所有的 bundle 会自动添加到 html 中。

具体插入方式是将样式link插入到head元素中，script插入到head或者body中。

npm install html-webpack-plugin --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // ...
    plugins: [
      new HtmlWebpackPlugin({
        title: 'HtmlWebpackPlugin 插件学习',
        minify: {  
           removeComments: true, // 移除HTML中的注释
           collapseWhitespace: true, // 删除空白符与换行符
           minifyCSS: true, // 压缩内联css
        },
        inject: "head",  // 表示script标签插入位置，true(默认值), body, head, false(不插入)
      })
    ],
};

多页应用打包：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    index: './src/index.js',
    login: './src/login.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({  
       filename: 'index.html',  // 多个HtmlWebpackPlugin, filename字段不可缺省，否则默认生成的都是 index.html。
    }),
    new HtmlWebpackPlugin({
       filename: 'login.html',  
    }),
  ],
}

但是会发现 index.html 和 login.html 同时引入了 index.bundle.js 和 login.bundle.js，而通常只希望 index.html 中只引入 index.bundle.js，login.html 只引入 login.bundle.js。HtmlWebpackPlugin 提供了一个 chunks 的参数，可以接受一个数组，配置此参数仅会将数组中指定的 js 引入到 html 文件中

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html', 
      chunks: ['index'],   // index.html 中仅引入了 index.js 文件
    }),
    new HtmlWebpackPlugin(
      filename: 'login.html', 
      chunks: ['login'],  // login.html 中仅引入了 login.js 文件
    }),
  ],
}

clean-webpack-plugin

在每次构建前清理 /dist 文件夹，用于生产环境，因为生产环境会生成许多bundle文件，不及时清理的话每次都生成新的，导致文件夹比较大，打包前清理上一次生成的 bundle 文件是比较推荐的做法，因此只会生成用到的文件。

npm install clean-webpack-plugin --save-dev

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    // ...
    plugins: [
         new CleanWebpackPlugin({
            // cleanStaleWebpackAssets 清除过时的网页包资产
            cleanStaleWebpackAssets: false   // 防止监听到改变时把没有改变的文件给清除了(当文件改变后不删除index.html文件)
        })
    ],
};

webpack-manifest-plugin

能够对「模块映射到输出 bundle 的过程」保持追踪。可以将数据提取到一个 json 文件中；说白了就是生成一个manifest.json 默认文件名， 是一个文件清单， 内容是打包前文件对应打包后的文件名。

npm install webpack-manifest-plugin --save-dev

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

module.exports = {
    // ...
    plugins: [
        new WebpackManifestPlugin() // 可以接受一个options 参数，默认在dist目录下生成 manifest.json
    ]
};

HotModuleReplacementPlugin(内置)

允许在运行时更新各种模块，而无需进行完全刷新。不适用于生产环境，意味着应当只在开发环境使用。启用HMR实际上就是更新 webpack-dev-server的配置，及使用 webpack 内置的 HMR 插件。

const webpack = require('webpack');
module.exports = {
    plugins: [
         new webpack.HotModuleReplacementPlugin(),
    ],
    devServer: {
        hot: true
    },
};

webpack要完全启用HMR需要使用webpack.HotModuleReplacementPlugin。如果webpack或webpack-dev-server 通过命令行添加 --hot 选项启动，该插件会自动添加，因此不需要将它添加到webpack.config.js中

但是经实际使用 webpack-dev-server 时发现，在webpack.config.js中仅仅配置了devServer.hot:true，并未添加上述插件时仍然实现了HMR
原来 webpack-dev-server 内部自动帮我们完成了这个事情。通过在Github 的 webpack-dev-server 搜索，找到以下源码：

if (options.hot || options.hotOnly) {
  config.plugins = config.plugins || [];
   // 判断了配置的插件中是否包含名为HotModuleReplacementPlugin的插件，如果没有则添加。
  if (
    !config.plugins.find(
      // Check for the name rather than the constructor reference in case
      // there are multiple copies of webpack installed
      (plugin) => plugin.constructor.name === 'HotModuleReplacementPlugin'
    )
  ) {
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
  }
}

mini-css-extract-plugin

抽离css样式到统一的文件中。因为目前学习的版本是webpack4，所以不能直接下载最新版本，需要指定较低的插件版本，否则打包时会报错

npm instasll  mini-css-extract-plugin@1.6 -D

可以编写两个css文件，并在入口文件中引入，例如 index.js 中引入 require('index.css')，index.css 中引入 @import './style.css'

// index.js
console.log('index')
require('./index.css')


// index.css
@import './style.css';
.hello {
    color: blueviolet;
 }

// style.css 
body{
    background-color: pink;
}

配置文件中，配置css代码抽离目录，及loader配置，在规则中替换原来的style-loader，实际上 style-loader是将css样式插入到html中，该插件是创建一个link标签，将内容添加至link标签中。最后执行打包指令，就可以在出口目录中得到抽离后的css文件。

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // webpack4 对应版本1.6
module.exports = {
    // ...
    plugins: [
         new MiniCssExtractPlugin({
             filename:'main.css'
         }),
    ],
     module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] 
            },
        ]
    }
};

autoprefixer

自动给浏览器添加前缀，需要配合一个 postcss-loader 去使用(webpack4中使用需要执行版本), 在css-loader之前使用(放在css-loader之后，因为loader 的执行顺序是从右往左)，此时在执行打包指令时，会报一个错，提示缺失postcss config文件，创建一个postcss.config.js文件

npm install postcss-loader@4.0 autoprefixer -D

// postcss.config.js
module.exports = {
    plugins: [require('autoprefixer')] // 给css添加浏览器前缀
}

// webpack.config.js
module.exports = {
    // ...
     module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
        ]
    }
};

执行打包指令后，发现生成的样式并未能自动添加浏览器前缀，此时还需要修改package.json有关浏览器的配置，之后在执行打包执行，即可发现已经添加前缀

// package.json 
"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
]

optimize-css-assets-webpack-plugin

该插件用于压缩抽离的css文件。但是使用该插件以后将不能直接将打包后的 js 代码进行压缩，需要安装另一个插件完成js代码的压缩。下文介绍

npm install optimize-css-assets-webpack-plugin -D

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // webpack4 对应版本1.6
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // webpack4 对应版本6.0
module.exports = {
    // ...
    optimization: {
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin(), // 用了这个插件以后，会导致js代码无法压缩，需要使用UglifyJsPlugin插件，压缩js代码
        ]
    },
    plugins: [
         new MiniCssExtractPlugin({
             filename:'css/main.css'
         }),
    ],
     module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
        ]
    }
};

uglifyjs-webpack-plugin

用了optimize-css-assets-webpack-plugin插件压缩css后，会导致js代码无法压缩，需要使用UglifyJsPlugin插件，压缩js代码

npm install uglifyjs-webpack-plugin -D

const UglifyJsPlugin = require("uglifyjs-webpack-plugin")  // webpack4 对应版本2.2
module.exports = {
    // ...
    optimization: {
        minimizer: [
            new UglifyJsPlugin({ // 压缩js代码
                cache: true, // 缓存
                parallel: true, // 并发打包
                sourceMap: true // 源码映射
            })
        ]
    },
};

copy-webpack-plugin

用于拷贝文件的插件，官网显示的用法有很多，版本不同，用法参数各有不同，此处使用为webpack4，插件版本为5.x

npm install copy-webpack-plugin@5 -D

const CopyWebpackPlugin = require("copy-webpack-plugin")  // webpack4 对应版本5.1
module.exports = {
    // ...
    plugins: [
        new CopyWebpackPlugin([
            { from: './doc', to: './' }   // 将开发相关文档，拷贝至打包文件目录
        ])
    ],
};

ProvidePlugin(内置)

提供插件 — 可以用来向每个模块注入变量，但不能通过通过window.$来访问，并未暴露给全局，仅在每个模块中使用

npm install jquery

const webpack = require('webpack');
module: {
    // ...
    plugins: [
        new webpack.ProvidePlugin({
            $:'jquery'
        }),
    ],
 }

BannerPlugin(内置)

版权声明插件。会给每个打包生成的js文件头部，插入版权声明信息

const webpack = require('webpack');
module: {
    // ...
    plugins: [
        new webpack.BannerPlugin("make 2022 by echoyya ")
    ],
 }