前言

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

  • 《Vue2.x 组件库 Webpack3 升 5》
  • 《Vue2.x 项目 Webpack 4 升级 5(半自动升级)》

配置

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-loadervue-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-loadervue-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 stylingexclude: /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#rulegeneratorfilenamefilename: '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(),//压缩cssnew TerserPlugin({// 压缩 jsterserOptions: {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) 目录(两种方式)

方式一:

如果 webpackv5.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 官网 !