Webpack5常用plugins整理

我正在参加「掘金·启航计划」

Webpack5 plugins

本文会介绍下 Webpack5 中比较常用的 plugins ，以及用法和注意事项。可以有效提高开发生产效率、提升打包速度和质量、分析和优化。

DefinePlugin

webpack.docschina.org/plugins/def…

Webpack5自带plugin，我们可以通过 DefinePlugin 可以定义一些全局的变量，我们可以在模块当中直接使用这些变量，会在编译阶段，将你代码中的变量替换为对应的值。

比如在业务中区分开发和生产模式、页面回显打包时间、传递打包环境的环境变量等，都很有用。

plugins: [
   new webpack.DefinePlugin({
       'PRODUCTION': JSON.stringify(true), // 对应下面的截图例子
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), // 区分开发和生产模式
       'process.env.PackageTime': JSON.stringify(new Date()), // 用于页面回显打包时间
       'test1': JSON.stringify("some text"), // 建议json序列化下，编译替换时也是用的json反序列化后替换
       'test2': '"some text"', // 如果不用json序列化，字符串变量就得这样对应
    }),
]

SplitChunksPlugin

webpack.docschina.org/plugins/spl…

Webpack5自带plugin，用于按需对打包文件进行拆分chunks。

Webpack内有默认配置，chunks 默认是 async，所以在如果不配置默认情况下，如果用了异步引用（比如动态import）则会进行拆分；如果有别的情况需求，可以按文档设置。

我建议，如果没有特别拆分包需求，可以按下面配置，把 node_modules 包单拆出来。

optimization: {
    splitChunks: {
        cacheGroups: {
            defaultVendors: {
                chunks: 'all',
                test: /[\\/]node_modules[\\/]/,
                name: 'vendors',
                priority: -10,
            },
        }
    }
},

build后，就会发现 vendors 文件拆出来了。

html-webpack-plugin

www.npmjs.com/package/htm…

这个很熟悉了，它支持打包时，自动生成html文件或者按模板配置生成html文件，并且会按需自动插入打包好的静态文件自动插入html中。

npm i html-webpack-plugin --D

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

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, './assets/index.html'), // 自定义模板
        inject: 'body', // 插入到body
    }),

mini-css-extract-plugin

www.npmjs.com/package/min…

这个插件可以将将 CSS 提取到单独的文件中。并且支持按需加载 CSS 和 SourceMaps。

npm i mini-css-extract-plugin --D

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

rules: [
    {
        // less/css
        test: /\.(less|css)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    },
    {
        // sass/scss/css
        test: /\.(sa|sc|c)ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    },
    
plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].[contenthash:8].css",
        chunkFilename: "[id].[contenthash:8].css",
        ignoreOrder: true,
    }),
],

css-minimizer-webpack-plugin

www.npmjs.com/package/css…

用来压缩css文件，需要配合 mini-css-extract-plugin 使用。

npm i css-minimizer-webpack-plugin --D

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

optimization: {
    minimize: devMode ? false : true,
    minimizer: [
        new CssMinimizerPlugin({}),
    ],

terser-webpack-plugin

www.npmjs.com/package/ter… webpack.docschina.org/plugins/ter…

用来压缩js文件，Webpack5 开箱即带有最新版本的 terser-webpack-plugin，不需要额外安装。

terserOptions参数配置参考：github.com/terser/ters…

const TerserPlugin = require('terser-webpack-plugin');

optimization: {
    minimize: devMode ? false : true,
    minimizer: [
        new TerserPlugin({
            parallel: 4, // 使用多进程并发运行以提高构建速度，默认是 os.cpus().length - 1
            extractComments: false, // 禁止单独提取注释文件
            terserOptions: {
                format: {
                    comments: false, // 移除所有注释
                },
                compress: {
                    pure_funcs: ['console.log'], // 移除console.log functions
                    drop_console: true, // 移除所有console functions
                }
            }
        }),
    ],

copy-webpack-plugin

www.npmjs.com/package/cop…

支持打包时，copy自定义文件到output或指定路径下。

npm i copy-webpack-plugin -D

const CopyPlugin = require("copy-webpack-plugin");

plugins: [
    new CopyPlugin({
        patterns: [
            // copy assets/favicon.ico 文件到 {output} 路径下
            { context: './assets', from: 'favicon.ico', to: '', info: { minimized: true } },
            // copy assets/js/a.js 文件到 {output}/js 路径下，并且会在production下进行压缩
            { context: './assets/js', from: 'a.js', to: 'js' },
            // copy assets/lib/ 路径下所有文件到 {output}/3rd 路径下，并且不压缩
            { context: './assets/lib', from: '**', to: '3rd', info: { minimized: true } },
        ],
    }),

case-sensitive-paths-webpack-plugin

www.npmjs.com/package/cas…

检查引用的文件路径完全匹配，比如大小写不匹配，就会在打包时提示处理。Window系统文件系统是不区分大小写的，路径大小写写错了也会build成功，但是有些系统是严格区分大小写的，比如Linux，就会build失败，利用这个插件就可以做到检查。用法很简单。

npm i case-sensitive-paths-webpack-plugin -D

const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

plugins: [
    new CaseSensitivePathsPlugin(),
],

webpack-license-plugin

www.npmjs.com/package/web…

它会扫描项目中所有使用到的npm package，并生成第三方开源组件的使用证书，方便开发者审核使用情况，同时保障项目的合法性。

npm i webpack-license-plugin -D

const LicensePlugin = require('webpack-license-plugin');

plugins: [
    new LicensePlugin({
        outputFilename: 'my-licenses.json', // 结果生成到json文件里
        unacceptableLicenseTest: licenseIdentifier =>
            ['GPL', 'AGPL', 'LGPL', 'NGPL'].includes(licenseIdentifier)
    }),
],

webpack-bundle-analyzer

www.npmjs.com/package/web…

很常用的Webpack打包分析插件，使用交互式可缩放树形地图可视化，并输出文件的大小。可以方便开发人员检查打包后的文件拆分、分析文件大小等。

在缩减打包文件、按需加载拆分打包文件、提高首屏加载效率时会很有用。

npm i webpack-bundle-analyzer -D

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

plugins: [
    new BundleAnalyzerPlugin(),
],

webpack-deadcode-plugin

该插件会检查项目中没有引用到的文件，以及没有引用到的exports，方便开发维护。

www.npmjs.com/package/web…

npm i webpack-deadcode-plugin -D

const DeadCodePlugin = require('webpack-deadcode-plugin');

optimization: {
    usedExports: true, // 如果想扫描 unused exports，需要设置为true，production下默认是true
},
plugins: [
    new DeadCodePlugin({
        patterns: [
            './src/**', // 只扫描src路径下所有文件
        ],
        exclude: [
            './**/mapping.xml',
            './**/*.md',
        ],
        log: "none", // 不输出log
        exportJSON: `./analysis` // 结果生成到analysis路径下
    })
],

其它

还有些其它常用的 plugins，我没用过，有需要可以用下。

• thread-loader 提升编译速度
• IgnorePlugin 忽略第三方包部分目录导入
• DllPlugin 动态DLL库
• purgecss-webpack-plugin CSS Tree Shaking
• image-webpack-loader 对打包图片文件进行压缩
• duplicate-package-checker-webpack-plugin 检查npm包多版本