《基于 Vue 组件库的 Webpack5 配置》- 总结

前言

Vue2 项目升级到 Webpack5 后，相关的配置也有所变化！此篇以记录和总结，共同学习 Webpack ~
推荐相关文章：

配置

1. 模式 Mode

一定要配置模式 Mode，这里有个小知识点，环境变量 process.env.NODE_ENV

module.exports = {
    mode: 'production',// process.env.NODE_ENV 或 development,
}

2. vue-loader

一定要配置 vue-loader

Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用；
一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件；
vue-loader 和 vue-template-compiler 要一起安装，以保证版本的一致性。npm install -D vue-loader vue-template-compiler；

package.json 的 webpack 中必须配置该插件，如下

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
        // use: ['vue-loader'] //也可以，是数组
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

3. module.rules

配置 module.rules ，创建模块时，匹配请求的规则数组；

可参考 webpack5 指南-管理资源；
vue 可参考上述配置；
js 使用 webpack babel-loader；
css 参考 webpack 加载 CSS。注意style-loader 和 vue-style-loader 选一个即可，两者的功能基本一致，只是 vue-style-loader 可用于服务端渲染 SSR；
stylus 参考 webpack stylus-loader。可使用插件 MiniCssExtractPlugin 提取样式到单独的文件，需额外安装 npm i mini-css-extract-plugin -D；
png/svg/jpg 参考 webpack 加载图像，注意 type 的配置资源模块 asset/resource (强烈建议认真阅读此链接)；
ttf/woff/woff2 参考 webpack 加载字体，注意 type 的配置资源模块 asset/resource (强烈建议认真阅读此链接)；

webpack.config.js 的配置如下

// 需安装，可将CSS提取到单独的文件：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                // 必须加上，否则在编译过程中报错 The code generator has deoptimised the styling
                exclude: /node_modules/, 
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    //与 style-loader 功能类似，只是 vue-style-loader 可用于服务端渲染
                    // "vue-style-loader", 
                    "css-loader"
                ]
            },
            {
                test: /\.styl(us)?$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'stylus-loader',
                ]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    // publicPath: 'assets/imgs/', // https://webpack.docschina.org/configuration/module#rulegeneratorfilename
                    filename: 'imgs/[hash][ext]',
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                    // publicPath: 'assets/fonts/',
                    filename: 'fonts/[hash][ext]',
                }
            },
        ]
    },
}

4. 将 CSS 提取到单独的文件

使用 webpack 插件 mini-css-extract-plugin 需要额外安装 npm i mini-css-extract-plugin@latest -D；
同时打包 js 和 css 文件时，可参考 entry 高级用法；

package.json 的配置如下

const { VueLoaderPlugin } = require('vue-loader');
// 可将CSS提取到单独的文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'production',
    entry: {
      "my-webcomponents": ['./index.js', './src/assets/stylus/main.styl'],
      "my-webcomponents2": ['./index2.js', './src/assets/stylus/main2.styl'],
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        clean: true, 
    },
    plugins: [
        new VueLoaderPlugin(),        
        new MiniCssExtractPlugin({
            filename: "[name].css",
            // filename: "main.css", // 也可以指定名称，但css只会输出一个
        }),
    ],
}

5. 压缩 CSS 和 js 文件

压缩 CSS 使用 webpack 插件 css-minimizer-webpack-plugin，需要额外安装 npm i css-minimizer-webpack-plugin@latest -D；
压缩 js 使用 webpack 自带插件 terser-webpack-plugin，无需额外安装；
package.json 的配置如下

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

module.exports = {
    optimization: {// 优化
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin(),//压缩css
            new TerserPlugin({// 压缩 js
                terserOptions: {
                    format: {
                        comments: false,
                    },
                },
                extractComments: false,
            }),
        ],
    }
}

6. js代码混淆

使用插件 webpack-obfuscator，需要安装 npm install --save-dev javascript-obfuscator webpack-obfuscator
package.json 的配置如下

const WebpackObfuscator = require('webpack-obfuscator');

module.exports = {
    plugins: [
        new WebpackObfuscator ({
            rotateStringArray: true
        }, [])
    ],
}

7. 静态文件

将字体库和图片等静态资料，编译后打包至指定文件夹

参考 Rule.generator.filename
package.json 的配置如下

module.exports = {
    module: {
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    // publicPath: 'assets/imgs/', // 
                    filename: 'imgs/[hash][ext]',
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'fonts/[hash][ext]',
                }
            },
        ]
    },
}

8. 路径别名

resolve.alias

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src/"),
            "@assets": path.resolve(__dirname, "./src/assets/"),
            "@mixins": path.resolve(__dirname, "./src/mixins/"),
            "@components": path.resolve(__dirname, "./src/components/"),
            "@images": path.resolve(__dirname, "./src/assets/images/")
        },
        extensions: [".*", ".js", ".vue", ".json"]
    }
}

9. 性能

performance

module.exports = {
    performance: {// 性能
        hints: 'warning', // 枚举 false 关闭性能提示
        maxEntrypointSize: 10240000000000, // 最大入口文件大小
        maxAssetSize: 10240000000000, // 最大资源文件大小
    },
}

10. 在生成打包文件之前清空 output(dist) 目录（两种方式）

方式一：

如果 webpack 是 v5.20.0+，直接使用属性 output.clean，配置如下：

module.exports = {
  //...
  output: {
    clean: true
  },
};

方式二：

如果使用较低版本，可以使用插件 clean-webpack-plugin：

先安装：npm i clean-webpack-plugin -D；

再配置：

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

module.exports = {
  //...
  plugins: {
     new CleanWebpackPlugin() 
  },
};

11. `module.exports` 可为数组类型且注意编译顺序

module.exports常见是对象类型，其实也可用数组类型；
注意编译顺序，从后往前 编：
- 也就是说先编 another.js，再编 index.js；
- 所以代码第 9 行不能设置为 true，仅在第一次，也就是代码第19行设置一次即可清空整个 output 文件夹；
- 如果代码第 9 行设置为 true，则在编 index.js时，会删除another.js 已编译好的文件；

module.exports = [
    {
        mode: 'production',
        entry: {
            "indexs": './index.js' ,
        },
        output: {
            filename: '[name].js',
            // clean: true, // 在每次构建前清理 /dist 文件夹
        }
    },
    {
        mode: 'production',
        entry: {
            "another": './another.js' ,
        },
        output: {
            filename: '[name].js',
            clean: true, // 在每次构建前清理 /dist 文件夹
        }
    }
];

最后

想了解更多，可参考 Webpack 官网！

前言

配置