《基于 Vue 组件库 的 Webpack5 配置》- 总结
前言
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-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 官网 ！