Webpack项目学习：Vue-cli（脚手架）-优化配置 -ui库element-plus+减小打包体积 -按需加载+自定义主题+优化
安装
npm i element-plus全部引入，在入口文件main.js
启动：npm start
按需引入
需要插件快速开始 | Element Plus (gitee.io)
npm install -D unplugin-vue-components unplugin-auto-import
//ESLint先引入
const ESLintPlugin = require('eslint-webpack-plugin');
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
//提取样式成为单独文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//对样式压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//对js压缩
const TerserPlugin = require("terser-webpack-plugin");
//复制静态资源文件到index目录下面
const CopyPlugin = require("copy-webpack-plugin");
//解决vue警告
const { DefinePlugin } = require("webpack");
//处理单文件组件
const { VueLoaderPlugin } = require("vue-loader");
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
// 需要通过 cross-env 定义环境变量
const isProduction = process.env.NODE_ENV === "production";
const getStyleLoaders = (preProcessor) => {
return [
isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader",//提取成单独文件
"css-loader",// //该模块将css资源编译成commonjs的模块到js中
{//考虑兼容性问题-配合packafe.json中的browserslist来指定兼容性
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor,
].filter(Boolean);
}
module.exports = {
// 入口
entry: "./src/main.js",// 相对路径和绝对路径都行 由于运行是在外面运行的所以不需要改变
// 输出
output: {// 必须绝对路径
//生产模式有输出
path: isProduction ? path.resolve(__dirname, "../dist") : undefined,//绝对路径需要更改
// filename: 输出文件名-contenthash更好的做缓存
filename: isProduction
? "static/js/[name].[contenthash:10].js"
: "static/js/[name].js",
//给打包输出的文件命名-动态导入
chunkFilename: isProduction
? "static/js/[name].[contenthash:10].chunk.js"
: "static/js/[name].chunk.js",
// 图片、字体等资源命名方式（注意用hash）
assetModuleFilename: "static/js/[hash:10][ext][query]",
clean: true,//自动将上次打包目录资源清空
},
// 加载器-帮助识别不能识别的内容
module: {//loader规则
rules: [
{
//每个文件只能被其中一个loader配置处理
oneOf: [
{
//css处理
test: /\.css$/i, // 用来匹配 .css 结尾的文件
use: getStyleLoaders(),
},
{
test: /\.less$/i, // 用来匹配 .less 结尾的文件
//loader:"xxx"只能使用1个loader
use: getStyleLoaders("less-loader"),
},
{
test: /\.s[ac]ss$/i,
use: getStyleLoaders("sass-loader"),
},
{
test: /\.styl$/,
use: getStyleLoaders("stylus-loader"),
},
//处理图片
{
test: /\.(png|jpe?g|gif|webp|svg)/,
type: 'asset',//asset会转base64
parser: {//图片优化
dataUrlCondition: {
//小于10ke图片转base64
//优点：减少请求数量 缺点：体积会更大
maxSize: 10 * 1024 // 10kb
}
},
},
{//处理其他资源
test: /\.(ttf|woff2|map4|map3|avi?)$/,//针对文件类型，正则
type: "asset/resource",//不会转，原封不动输出
},
{
test: /\.jsx?$/,//处理的文件js+jsx
include: path.resolve(__dirname, "../src"), //只处理src文件
use: [
{
loader: "babel-loader",//只用一个
//提升性能
options: {
cacheDirectory: true, // 开启babel编译缓存
cacheCompression: false, // 缓存文件不要压缩，压缩需要时间
},
},//这里不考虑多线程
]
},
],
},
// vue-loader不支持oneOf
{//处理vue资源
test: /\.vue$/,
loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
options: {
// 开启缓存
cacheDirectory: path.resolve(
__dirname,
"node_modules/.cache/vue-loader"
),
},
},]
},
// 插件-扩展功能
plugins: [
//检查eslint
new ESLintPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", // 默认值-排除不处理
cache: true, // 开启缓存
// 缓存目录
cacheLocation: path.resolve(
__dirname,
"../node_modules/.cache/.eslintcache"
),
}),
//处理html资源 自动引入
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建新的html文件
// 新的html文件有两个特点：1. 内容和源文件一致 DOM结构 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
// 提取css成单独文件
isProduction && new MiniCssExtractPlugin( // 定义输出文件名和目录
{
// 定义输出文件名和目录
filename: "static/css/[name].[contenthash:10].css",
//动态导入也有css
chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
}),
//复制public资源到index里面
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, "../public"),//将public包含index文件
to: path.resolve(__dirname, "../dist"),//复制到dist目录下
globOptions: {
// 忽略index.html文件
ignore: ["**/index.html"],
},
},
],
}),
new VueLoaderPlugin(),
//定义cross_env定义环境变量给打包工具属于
//DefinePlugin定义环境变量给源代码使用 从而解决vue3警告问题
new DefinePlugin({
__VUE_OPTIONS_API__: "true",
__VUE_PROD_DEVTOOLS__: "false",
}),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
].filter(Boolean),
// 模式
mode: isProduction ? "production" : "development",
devtool: isProduction ? "source-map" : "cheap-module-source-map",
//代码分割
optimization: {
splitChunks: {
chunks: "all",
},
// 提取runtime文件
runtimeChunk: {//会导致缓存失效-处理
name: (entrypoint) => `runtime~${entrypoint.name}`,
},
minimize: isProduction,
//压缩css
minimizer: [
// css压缩也可以写到optimization.minimizer里面，效果一样的
//压缩css
new CssMinimizerPlugin(),
// 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
//压缩js
new TerserPlugin(),
],
},
//webpack解析模块加载选项
resolve: {
//自动补全文件扩展名
extensions: ['.vue', '.js', '.json']
}
};更改默认配置
主题 | Element Plus (gitee.io)
preProcessor && {
loader: preProcessor,
options:
preProcessor === "sass-loader"
? {
// 自定义主题：自动引入我们定义的scss文件 --@是路径别名需要配置
additionalData: `@use "@/styles/element/index.scss" as *;`,
}
: {},
}, //webpack解析模块加载选项
resolve: {
//自动补全文件扩展名
extensions: ['.vue', '.js', '.json'],
alias: {
// 路径别名
"@": path.resolve(__dirname, "../src"),
},
} //按需加载
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver({
importStyle: "sass",//自定义主题 引入sass
})],
}),
如果有模块没有安装 ，安装一下即可
优化
关闭性能分析
performance: false,//关闭性能分析提升打包速度文件单独打包
cacheGroups: {
// layouts通常是admin项目的主体布局组件，所有路由组件都要使用的
// 可以单独打包，从而复用
// 如果项目中没有，请删除
layouts: {
name: "layouts",
test: path.resolve(__dirname, "../src/layouts"),
priority: 40,
},
// 如果项目中使用element-plus，此时将所有node_modules打包在一起，那么打包输出文件会比较大。
// 所以我们将node_modules中比较大的模块单独打包，从而并行加载速度更好
// 如果项目中没有，请删除
elementUI: {
name: "chunk-elementPlus",
test: /[\\/]node_modules[\\/]_?element-plus(.*)/,
priority: 30,
},
// 将vue相关的库单独打包，减少node_modules的chunk体积。
vue: {
name: "vue",
test: /[\\/]node_modules[\\/]vue(.*)[\\/]/,
chunks: "initial",
priority: 20,
},
libs: {
name: "chunk-libs",
test: /[\\/]node_modules[\\/]/,
priority: 10, // 权重最低，优先考虑前面内容
chunks: "initial",
},
}, 做缓存-
{//处理vue资源
test: /\.vue$/,
loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
options: {
// 开启缓存
cacheDirectory: path.resolve(
__dirname,
"node_modules/.cache/vue-loader"
),
},
},]
//ESLint先引入
const ESLintPlugin = require('eslint-webpack-plugin');
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
//提取样式成为单独文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//对样式压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//对js压缩
const TerserPlugin = require("terser-webpack-plugin");
//复制静态资源文件到index目录下面
const CopyPlugin = require("copy-webpack-plugin");
//解决vue警告
const { DefinePlugin } = require("webpack");
//处理单文件组件
const { VueLoaderPlugin } = require("vue-loader");
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
// 需要通过 cross-env 定义环境变量
const isProduction = process.env.NODE_ENV === "production";
const getStyleLoaders = (preProcessor) => {
return [
isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader",//提取成单独文件
"css-loader",// //该模块将css资源编译成commonjs的模块到js中
{//考虑兼容性问题-配合packafe.json中的browserslist来指定兼容性
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor && {
loader: preProcessor,
options:
preProcessor === "sass-loader"
? {
// 自定义主题：自动引入我们定义的scss文件 --@是路径别名需要配置
additionalData: `@use "@/styles/element/index.scss" as *;`,
}
: {},
},
].filter(Boolean);
}
module.exports = {
// 入口
entry: "./src/main.js",// 相对路径和绝对路径都行 由于运行是在外面运行的所以不需要改变
// 输出
output: {// 必须绝对路径
//生产模式有输出
path: isProduction ? path.resolve(__dirname, "../dist") : undefined,//绝对路径需要更改
// filename: 输出文件名-contenthash更好的做缓存
filename: isProduction
? "static/js/[name].[contenthash:10].js"
: "static/js/[name].js",
//给打包输出的文件命名-动态导入
chunkFilename: isProduction
? "static/js/[name].[contenthash:10].chunk.js"
: "static/js/[name].chunk.js",
// 图片、字体等资源命名方式（注意用hash）
assetModuleFilename: "static/js/[hash:10][ext][query]",
clean: true,//自动将上次打包目录资源清空
},
// 加载器-帮助识别不能识别的内容
module: {//loader规则
rules: [
{
//每个文件只能被其中一个loader配置处理
oneOf: [
{
//css处理
test: /\.css$/i, // 用来匹配 .css 结尾的文件
use: getStyleLoaders(),
},
{
test: /\.less$/i, // 用来匹配 .less 结尾的文件
//loader:"xxx"只能使用1个loader
use: getStyleLoaders("less-loader"),
},
{
test: /\.s[ac]ss$/i,
use: getStyleLoaders("sass-loader"),
},
{
test: /\.styl$/,
use: getStyleLoaders("stylus-loader"),
},
//处理图片
{
test: /\.(png|jpe?g|gif|webp|svg)/,
type: 'asset',//asset会转base64
parser: {//图片优化
dataUrlCondition: {
//小于10ke图片转base64
//优点：减少请求数量 缺点：体积会更大
maxSize: 10 * 1024 // 10kb
}
},
},
{//处理其他资源
test: /\.(ttf|woff2|map4|map3|avi?)$/,//针对文件类型，正则
type: "asset/resource",//不会转，原封不动输出
},
{
test: /\.jsx?$/,//处理的文件js+jsx
include: path.resolve(__dirname, "../src"), //只处理src文件
use: [
{
loader: "babel-loader",//只用一个
//提升性能
options: {
cacheDirectory: true, // 开启babel编译缓存
cacheCompression: false, // 缓存文件不要压缩，压缩需要时间
},
},//这里不考虑多线程
]
},
],
},
// vue-loader不支持oneOf
{//处理vue资源
test: /\.vue$/,
loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
options: {
// 开启缓存
cacheDirectory: path.resolve(
__dirname,
"node_modules/.cache/vue-loader"
),
},
},]
},
// 插件-扩展功能
plugins: [
//检查eslint
new ESLintPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", // 默认值-排除不处理
cache: true, // 开启缓存
// 缓存目录
cacheLocation: path.resolve(
__dirname,
"../node_modules/.cache/.eslintcache"
),
}),
//处理html资源 自动引入
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建新的html文件
// 新的html文件有两个特点：1. 内容和源文件一致 DOM结构 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "../public/index.html"),
}),
// 提取css成单独文件
isProduction && new MiniCssExtractPlugin( // 定义输出文件名和目录
{
// 定义输出文件名和目录
filename: "static/css/[name].[contenthash:10].css",
//动态导入也有css
chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
}),
//复制public资源到index里面
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, "../public"),//将public包含index文件
to: path.resolve(__dirname, "../dist"),//复制到dist目录下
globOptions: {
// 忽略index.html文件
ignore: ["**/index.html"],
},
},
],
}),
new VueLoaderPlugin(),
//定义cross_env定义环境变量给打包工具属于
//DefinePlugin定义环境变量给源代码使用 从而解决vue3警告问题
new DefinePlugin({
__VUE_OPTIONS_API__: "true",
__VUE_PROD_DEVTOOLS__: "false",
}),
//按需加载
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver({
importStyle: "sass",//自定义主题 引入sass
})],
}),
].filter(Boolean),
// 模式
mode: isProduction ? "production" : "development",
devtool: isProduction ? "source-map" : "cheap-module-source-map",
//代码分割
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
// layouts通常是admin项目的主体布局组件，所有路由组件都要使用的
// 可以单独打包，从而复用
// 如果项目中没有，请删除
layouts: {
name: "layouts",
test: path.resolve(__dirname, "../src/layouts"),
priority: 40,
},
// 如果项目中使用element-plus，此时将所有node_modules打包在一起，那么打包输出文件会比较大。
// 所以我们将node_modules中比较大的模块单独打包，从而并行加载速度更好
// 如果项目中没有，请删除
elementUI: {
name: "chunk-elementPlus",
test: /[\\/]node_modules[\\/]_?element-plus(.*)/,
priority: 30,
},
// 将vue相关的库单独打包，减少node_modules的chunk体积。
vue: {
name: "vue",
test: /[\\/]node_modules[\\/]vue(.*)[\\/]/,
chunks: "initial",
priority: 20,
},
libs: {
name: "chunk-libs",
test: /[\\/]node_modules[\\/]/,
priority: 10, // 权重最低，优先考虑前面内容
chunks: "initial",
},
},
},
// 提取runtime文件
runtimeChunk: {//会导致缓存失效-处理
name: (entrypoint) => `runtime~${entrypoint.name}`,
},
minimize: isProduction,
//压缩css
minimizer: [
// css压缩也可以写到optimization.minimizer里面，效果一样的
//压缩css
new CssMinimizerPlugin(),
// 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
//压缩js
new TerserPlugin(),
],
},
//webpack解析模块加载选项
resolve: {
//自动补全文件扩展名
extensions: ['.vue', '.js', '.json'],
alias: {
// 路径别名
"@": path.resolve(__dirname, "../src"),
},
},
performance: false,//关闭性能分析提升打包速度
};