系统化学习前端之webpack（进阶）

webpack 高级配置

Webpack 发展至今，除了编译资源外，还拓展了许多 loader 和 plugin 来辅助提升项目性能。

写在前面

webpack 功能之强大，令吾等为之惊叹，欢迎挖宝。

提升开发体验

SourceMap

使用 webpack 解析 js 和 css 文件，然后输出到指定文件，代码经过编译输出以后，我们在开发过程中是很难定位 bug 在哪个文件，哪一行的。因此，我们需要通过 SourceMap（源代码映射）来帮助我们定位 bug 位置。其原理：代码构建过程中，会生成 .map 文件，包含源码与编译代码的映射关系，通过映射可以快速定位 bug。

开发模式配置 SourceMap

module.exports = {
  mode: "development",
  devtool: "cheap-module-source-map",
};

生产模式配置 SourceMap
```
module.exports = {
  mode: "production",
  devtool: "source-map",
};
```
注意：开发模式配置 SourceMap 值为：cheap-module-source-map，只包含行映射，没有列映射，打包速度快；生产模式配置：source-map，包含行、列映射，打包速度慢。根据实际情况，可以自行设置devtool 值，其他 devtool 配置。

提升打包构建速度

HotModuleReplacement（HMR）

webpack 默认会编译打包项目中所有模块，但是我们开发过程中可能只会针对某一模块修改，因此 HMR 帮助我们只编译打包修改后的模块，其他未修改的模块不参与打包，提高打包速度。其原理：开启 HMR ，修改模块是更新模块内容，页面不刷新，关闭 HMR，修改模块是更新整个页面，页面刷新。

开启 HMR

module.exports = {
  devServer: {
	host: "localhost", 
	port: "3000", 
	open: true, 
	hot: true, // 开启HMR功能（只用于开发环境）
  },
};

配置 loader

css 通过 style-loader 处理后具备 HMR 功能；vue 通过 vue-loader 处理后具备 HMR 功能；react 通过 react-hot-loader 处理后具备 HMR 功能；js 文件只能通过在入口文件，使用 module.hot.accept('./xx.js') 重新加载文件方式实现 HMR 功能；

oneOf

使用 loader 时，use 可以配置多个loader，多种文件也会配置使用多个 loader。文件经过 loader 需要先验证，后处理。test 正则使得 loader 不处理部分文件，但是每个文件处理会默认通过所有 loader 验证，因此降低打包构建速度。而 oneOf 类似正则中的贪婪匹配，只匹配一个 loader，一旦验证且 test 通过，不经过其他 loader 。

module.exports = {
	module: {
		rules: [
		  {
			oneOf: [
			  {
				test: /\.css$/,
				use: ["style-loader", "css-loader"],
			  },
			  {
				test: /\.less$/,
				use: ["style-loader", "css-loader", "less-loader"],
			  },
			  {
				test: /\.s[ac]ss$/,
				use: ["style-loader", "css-loader", "sass-loader"],
			  },
			  {
				test: /\.styl$/,
				use: ["style-loader", "css-loader", "stylus-loader"],
			  },
			  {
				test: /\.(png|jpe?g|gif|webp)$/,
				type: "asset",
				parser: {
				  dataUrlCondition: {
					maxSize: 10 * 1024,
				  },
				},
				generator: {
				  filename: "static/imgs/[hash:8][ext][query]",
				},
			  },
			  {
				test: /\.(ttf|woff2?)$/,
				type: "asset/resource",
				generator: {
				  filename: "static/media/[hash:8][ext][query]",
				},
			  },
			  {
				test: /\.js$/,
				exclude: /node_modules/, 
				loader: "babel-loader",
			  },
			],
		  },
		],
	},
}

Include/Exclude

使用 loader 时，可以使用 test 正则匹配，也可以使用 Include 指定，或者 Exclude 排除部分文件；

module.exports = {
	module: {
		rules: [
			{
				oneOf: [
					{
						test: /\.js$/,
						// exclude: /node_modules/,  // 排除node_modules代码不编译
						include: path.resolve(__dirname, "../src") // 只包含src下的 js 文件
						loader: "babel-loader", // 只使用一个 loader，可以不是用 use
					}
				]
			}
		]
	},
	plugins: [
		new ESLintWebpackPlugin({
		  context: path.resolve(__dirname, "../src"),
		  exclude: "node_modules", // 默认值
		}),
	]
}

Cache

js 文件每次编译打包都需要经过 Eslint 检查和 Babel 编译，影响打包构建速度，使用 Cache 缓存之前的检查和编译结果，提升第二次及后续打包构建速度。

module.exports = {
	module: {
		rules: [
			{
				oneOf: [
					{
						test: /\.js$/,
						// exclude: /node_modules/,  // 排除node_modules代码不编译
						loader: "babel-loader", // 只使用一个 loader，可以不是用 use
						options: {
							cacheDirectory: true, // 开启babel编译缓存
							cacheCompression: false, // 缓存文件不要压缩
						}
					}
				]
			}
		]
	},
	plugins: [
		new ESLintWebpackPlugin({
		  context: path.resolve(__dirname, "../src"),
		  exclude: "node_modules", // 默认值
		  cache: true, // 开启缓存
		  cacheLocation: path.resolve(__dirname, "../node_modules/.cache/.eslintcache"), // 缓存目录
		}),
	]
}

Thead

针对较大的项目，可以使用 Thead 开启多进程，提高打包构建速度。之所以针对较大的项目，是因为每个进程启动会损耗大约 600ms 的开销，较大的项目会有所提升，而小项目可能带来多余的开销。

安装依赖
```
npm i thread-loader -D
```

webpack 配置

const os = require("os");
const TerserPlugin = require("terser-webpack-plugin");

const threads = os.cpus().length; // 进程数 == CPU核数

module.exports = {
	module: {
		rules: [
			{
				oneOf: [
					{
						test: /\.js$/,
						include: path.resolve(__dirname, "../src"),
						use: [
			              {
			                loader: "thread-loader", // 开启多进程
			                options: {
			                  workers: threads, // 数量
			                },
			              },
			              {
			                loader: "babel-loader",
			                options: {
			                  cacheDirectory: true, // 开启babel编译缓存
			                },
			              },
			            ],
					}
				]
			}
		]
	},
	plugins: [
		 new ESLintWebpackPlugin({
	      context: path.resolve(__dirname, "../src"),
	      exclude: "node_modules",
	      cache: true,
	      cacheLocation: path.resolve(__dirname, "../node_modules/.cache/.eslintcache"),
	      threads, // 开启多进程
	    }),
	],
	optimization: {
	    minimize: true,
	    minimizer: [
	      new CssMinimizerPlugin(), // css压缩同样可以写到optimization.minimizer里面
	      new TerserPlugin({ // 生产模式会默认开启TerserPlugin，但需要进行其他配置，需要重新写
	        parallel: threads // 开启多进程
	      })
	    ],
	 },
}

减少代码体积

Tree Shaking

开发中引入函数库或者组件库，实际开发只使用了部分函数和组件，Tree Shaking 使得按需引入，webpack 默认开启 Tree Shaking。

注意： Tree Shaking 依赖 ES Module，使用CommonJS导入无法使用。

Babel

Babel 在编译的过程中，会为每个文件的 js 都插入辅助代码，对于一些公共方法会重复添加辅助代码，增大代码体积。@babel/plugin-transform-runtime 是禁用了 Babel 注入辅助代码，为 js 提供辅助代码外部源，所有 js 文件都通过 @babel/plugin-transform-runtime 引用辅助代码。

安装依赖

npm i @babel/plugin-transform-runtime -D

webpack 配置

module.exports = {
	module: {
		rules: [
			{
				oneOf: [
					{
						test: /\.js$/,
						include: path.resolve(__dirname, "../src"),
						use: [
			              {
			                loader: "thread-loader", // 开启多进程
			                options: {
			                  workers: threads, // 数量
			                },
			              },
			              {
			                loader: "babel-loader",
			                options: {
			                  cacheDirectory: true, // 开启babel编译缓存
			                  cacheCompression: false, // 缓存文件不要压缩
              				  plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
			                },
			              },
			            ],
					}
				]
			}
		]
	},
}

Image Minimizer

项目开发引入图片资源体积较大，可以通过 image-minimizer-webpack-plugin 对图片资源压缩，减少图片体积。

安装依赖

无损压缩

npm i image-minimizer-webpack-plugin imagemin -D
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

有损压缩

npm i image-minimizer-webpack-plugin imagemin -D
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

webpack 配置

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
	optimization: {
		minimizer: [
			new ImageMinimizerPlugin({
		        minimizer: {
		          implementation: ImageMinimizerPlugin.imageminGenerate,
		          options: {
		            plugins: [
		              ["gifsicle", { interlaced: true }],
		              ["jpegtran", { progressive: true }],
		              ["optipng", { optimizationLevel: 5 }],
		              [
		                "svgo",
		                {
		                  plugins: [
		                    "preset-default",
		                    "prefixIds",
		                    {
		                      name: "sortAttrs",
		                      params: {
		                        xmlnsOrder: "alphabetical",
		                      },
		                    },
		                  ],
		                },
		              ],
		            ],
		          },
		        },
		      }),
		]
	}
}

注意：由于包安装的原因，可能导致压缩库下载失败，如果编译过程报错：Error: xxxxx.exe问题，执行下一步。

安装压缩软件
- jpegtran 官网下载 jpegtran.exe 配置项目 node_modules\jpegtran-bin\vendor 下；
- OptiPNG 官网下载 optipng.exe 配置项目 node_modules\optipng-bin\vendor 下。

优化代码运行性能

Code Split

webpack 编译打包 js 默认会打包到一个文件中，文件体积较大，影响页面加载。因此需要 Code Split 分割 js 文件，按需加载。

多入口多出口

module.exports = {
	entry: {
		main: "./src/main.js",
		app: "./src/app.js"
	},
	output: {
		path: path.resolve(__dirname, "dist"),
		filename: "js/[name].js",
		clean: true,
	}
}

注意：配置了多个入口，会输出多个 js 文件。

单入口模块分割

module.exports = {
	entry: "./src/main.js",
	output: {
	    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
	    filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
	    chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
	    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
	    clean: true,
	},
	module: {
		rules: [
			{
				oneOf: [
					{
			            test: /\.(png|jpe?g|gif|svg)$/,
			            type: "asset",
			            parser: {
			              dataUrlCondition: {
			                maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
		              },
		            },
		          },
		          {
		            test: /\.(ttf|woff2?)$/,
		            type: "asset/resource",
		          },
				]
			}
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
	      filename: "static/css/[name].css",
	      chunkFilename: "static/css/[name].chunk.css",
	    }),
	],
	splitChunks: {
      chunks: "all", // 对所有模块都进行分割
      // 以下是默认值
      // minSize: 20000, // 分割代码最小的大小
      // minRemainingSize: 0, // 类似于minSize，最后确保提取的文件大小不能为0
      // minChunks: 1, // 至少被引用的次数，满足条件才会代码分割
      // maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量
      // maxInitialRequests: 30, // 入口js文件最大并行请求数量
      // enforceSizeThreshold: 50000, // 超过50kb一定会单独打包（此时会忽略minRemainingSize、maxAsyncRequests、maxInitialRequests）
      // cacheGroups: { // 组，哪些模块要打包到一个组
      //   defaultVendors: { // 组名
      //     test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块
      //     priority: -10, // 权重（越大越高）
      //     reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
      //   },
      //   default: { // 其他没有写的配置会使用上面的默认值
      //     minChunks: 2, // 这里的minChunks权重更大
      //     priority: -20,
      //     reuseExistingChunk: true,
      //   },
      // },
    },
}

Preload / Prefetch

Preload / Prefetch 指定浏览器如何加载资源，均只会加载资源，并缓存，不执行资源。Preload 浏览器立即加载资源，只能加载当前页面需要的资源；Prefetch 浏览器在空闲时才开始加载资源，可以加载当前页面及下一个页面需要的资源；但 Preload 相对于 Prefetch 兼容性好一点。

安装依赖
```
npm i @vue/preload-webpack-plugin -D
```

webpack 配置

const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");

module.exports = {
	plugins: [
		new PreloadWebpackPlugin({
		  // rel: 'prefetch' // prefetch兼容性更差
	      rel: "preload", // preload兼容性更好
	      as: "script",
	    }),
	]
}

Network Cache

缓存，又爱又恨！静态资源可以通过缓存来提高访问速度，但是文件更新以后，文件名未发生变化会导致浏览器直接读取缓存，不会加载新资源。因此通过hash解决文件名更新是优化缓存使用的根本手段。

fullhash

webpack4 是 hash，每次修改文件，fullhash都会改变，文件缓存失效。
chunkhash

根据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk，生成对应的哈希值。js 和 css 是同一个入口文件引入，会共享一个 hash 值。

contenthash

根据文件内容生成 hash 值，只有文件内容变化了，hash 值才会变化。

module.exports = {
	output: {
	    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
	    filename: "static/js/[name].[contenthash:8].js", // 入口文件打包输出资源命名方式
	    chunkFilename: "static/js/[name].[contenthash:8].chunk.js", // 动态导入输出资源命名方式
	    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
	    clean: true,
	},
	plugins: [
		new MiniCssExtractPlugin({
	      filename: "static/css/[name].[contenthash:8].css",
	      chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
	    }),
	]
}

注意：当某一文件内容改变，其 contenthash 值改变，那引入该文件的主文件内容也会发生变化，如 import name.xxx.js 会变成 import name.yyy.js。如此，间接导致主文件缓存失效。针对这一问题，可以将 hash 与文件映射保存在单独 runtime 文件中，runtime 文件小，更新开销小。

修正后

module.exports = {
	output: {
	    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
	    filename: "static/js/[name].[contenthash:8].js", // 入口文件打包输出资源命名方式
	    chunkFilename: "static/js/[name].[contenthash:8].chunk.js", // 动态导入输出资源命名方式
	    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
	    clean: true,
	},
	plugins: [
		new MiniCssExtractPlugin({
	      filename: "static/css/[name].[contenthash:8].css",
	      chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
	    }),
	],
	runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`, // runtime文件命名规则
    },
}

Core-js

Babel 可以处理 js 文件中 ES6 语法，如箭头函数，解构等，但是async, promise, 数组部分方法 includes 等是不能处理的，使用 core-js 解决兼容性问题。

安装依赖

npm i @babel/eslint-parser -D
npm i core-js

eslint 配置(.eslintrc.js)

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  parser: "@babel/eslint-parser", // 支持最新的 ECMAScript 标准
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  plugins: ["import"], // 解决动态导入import语法报错问题 --> 实际使用eslint-plugin-import的规则解决的
  parserOptions: {
    ecmaVersion: 6, // es6
    sourceType: "module", // es module
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
}

babel 配置(babel.config.js)

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      { useBuiltIns: "usage", corejs: { version: "3", proposals: true } }, // 按需加载core-js的polyfill
    ],
  ],
};

PWA

离线访问，PWA应用，内部通过 Service Workers 技术实现。详细查看渐进式网络应用程序

写在后面

实际项目应用：

React-cli

点击查看代码

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

const isProduction = process.env.NODE_ENV === "production";

const getStyleLoaders = (preProcessor) => {
  return [
	isProduction ? MiniCssExtractPlugin.loader : "style-loader",
	"css-loader",
	{
	  loader: "postcss-loader",
	  options: {
		postcssOptions: {
		  plugins: [
			"postcss-preset-env",
		  ],
		},
	  },
	},
	preProcessor && {
	  loader: preProcessor,
	  options:
		preProcessor === "less-loader"
		  ? {
			  // antd的自定义主题
			  lessOptions: {
				modifyVars: {
				  // 其他主题色：https://ant.design/docs/react/customize-theme-cn
				  "@primary-color": "#1DA57A", // 全局主色
				},
				javascriptEnabled: true,
			  },
			}
		  : {},
	},
  ].filter(Boolean);
};

module.exports = {
  entry: "./src/main.js",
  output: {
	path: isProduction ? path.resolve(__dirname, "../dist") : undefined,
	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",
	assetModuleFilename: "static/js/[hash:10][ext][query]",
	clean: true,
  },
  module: {
	rules: [
	  {
		oneOf: [
		  {
			test: /\.css$/,
			use: getStyleLoaders(),
		  },
		  {
			test: /\.less$/,
			use: getStyleLoaders("less-loader"),
		  },
		  {
			test: /\.s[ac]ss$/,
			use: getStyleLoaders("sass-loader"),
		  },
		  {
			test: /\.styl$/,
			use: getStyleLoaders("stylus-loader"),
		  },
		  {
			test: /\.(png|jpe?g|gif|svg)$/,
			type: "asset",
			parser: {
			  dataUrlCondition: {
				maxSize: 10 * 1024,
			  },
			},
		  },
		  {
			test: /\.(ttf|woff2?)$/,
			type: "asset/resource",
		  },
		  {
			test: /\.(jsx|js)$/,
			include: path.resolve(__dirname, "../src"),
			loader: "babel-loader",
			options: {
			  cacheDirectory: true,
			  cacheCompression: false,
			  plugins: [
				// "@babel/plugin-transform-runtime",  // presets中包含了
				!isProduction && "react-refresh/babel",
			  ].filter(Boolean),
			},
		  },
		],
	  },
	],
  },
  plugins: [
	new ESLintWebpackPlugin({
	  extensions: [".js", ".jsx"],
	  context: path.resolve(__dirname, "../src"),
	  exclude: "node_modules",
	  cache: true,
	  cacheLocation: path.resolve(
		__dirname,
		"../node_modules/.cache/.eslintcache"
	  ),
	}),
	new HtmlWebpackPlugin({
	  template: path.resolve(__dirname, "../public/index.html"),
	}),
	isProduction &&
	  new MiniCssExtractPlugin({
		filename: "static/css/[name].[contenthash:10].css",
		chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
	  }),
	!isProduction && new ReactRefreshWebpackPlugin(),
	// 将public下面的资源复制到dist目录去（除了index.html）
	new CopyPlugin({
	  patterns: [
		{
		  from: path.resolve(__dirname, "../public"),
		  to: path.resolve(__dirname, "../dist"),
		  toType: "dir",
		  noErrorOnMissing: true, // 不生成错误
		  globOptions: {
			// 忽略文件
			ignore: ["**/index.html"],
		  },
		  info: {
			// 跳过terser压缩js
			minimized: true,
		  },
		},
	  ],
	}),
  ].filter(Boolean),
  optimization: {
	minimize: isProduction,
	// 压缩的操作
	minimizer: [
	  // 压缩css
	  new CssMinimizerPlugin(),
	  // 压缩js
	  new TerserWebpackPlugin(),
	  // 压缩图片
	  new ImageMinimizerPlugin({
		minimizer: {
		  implementation: ImageMinimizerPlugin.imageminGenerate,
		  options: {
			plugins: [
			  ["gifsicle", { interlaced: true }],
			  ["jpegtran", { progressive: true }],
			  ["optipng", { optimizationLevel: 5 }],
			  [
				"svgo",
				{
				  plugins: [
					"preset-default",
					"prefixIds",
					{
					  name: "sortAttrs",
					  params: {
						xmlnsOrder: "alphabetical",
					  },
					},
				  ],
				},
			  ],
			],
		  },
		},
	  }),
	],
	// 代码分割配置
	splitChunks: {
	  chunks: "all",
	  cacheGroups: {
		// layouts通常是admin项目的主体布局组件，所有路由组件都要使用的
		// 可以单独打包，从而复用
		// 如果项目中没有，请删除
		layouts: {
		  name: "layouts",
		  test: path.resolve(__dirname, "../src/layouts"),
		  priority: 40,
		},
		// 如果项目中使用antd，此时将所有node_modules打包在一起，那么打包输出文件会比较大。
		// 所以我们将node_modules中比较大的模块单独打包，从而并行加载速度更好
		// 如果项目中没有，请删除
		antd: {
		  name: "chunk-antd",
		  test: /[\\/]node_modules[\\/]antd(.*)/,
		  priority: 30,
		},
		// 将react相关的库单独打包，减少node_modules的chunk体积。
		react: {
		  name: "react",
		  test: /[\\/]node_modules[\\/]react(.*)?[\\/]/,
		  chunks: "initial",
		  priority: 20,
		},
		libs: {
		  name: "chunk-libs",
		  test: /[\\/]node_modules[\\/]/,
		  priority: 10, // 权重最低，优先考虑前面内容
		  chunks: "initial",
		},
	  },
	},
	runtimeChunk: {
	  name: (entrypoint) => `runtime~${entrypoint.name}`,
	},
  },
  resolve: {
	extensions: [".jsx", ".js", ".json"],
  },
  devServer: {
	open: true,
	host: "localhost",
	port: 3000,
	hot: true,
	compress: true,
	historyApiFallback: true,
  },
  mode: isProduction ? "production" : "development",
  devtool: isProduction ? "source-map" : "cheap-module-source-map",
  performance: false, // 关闭性能分析，提示速度
};

Vue-cli

点击查看代码

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require("webpack");
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",
	{
	  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: 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",
	assetModuleFilename: "static/js/[hash:10][ext][query]",
	clean: true,
  },
  module: {
	rules: [
	  {
		test: /\.css$/,
		use: getStyleLoaders(),
	  },
	  {
		test: /\.less$/,
		use: getStyleLoaders("less-loader"),
	  },
	  {
		test: /\.s[ac]ss$/,
		use: getStyleLoaders("sass-loader"),
	  },
	  {
		test: /\.styl$/,
		use: getStyleLoaders("stylus-loader"),
	  },
	  {
		test: /\.(png|jpe?g|gif|svg)$/,
		type: "asset",
		parser: {
		  dataUrlCondition: {
			maxSize: 10 * 1024,
		  },
		},
	  },
	  {
		test: /\.(ttf|woff2?)$/,
		type: "asset/resource",
	  },
	  {
		test: /\.(jsx|js)$/,
		include: path.resolve(__dirname, "../src"),
		loader: "babel-loader",
		options: {
		  cacheDirectory: true,
		  cacheCompression: false,
		  plugins: [
			// "@babel/plugin-transform-runtime" // presets中包含了
		  ],
		},
	  },
	  // vue-loader不支持oneOf
	  {
		test: /\.vue$/,
		loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
		options: {
		  // 开启缓存
		  cacheDirectory: path.resolve(
			__dirname,
			"node_modules/.cache/vue-loader"
		  ),
		},
	  },
	],
  },
  plugins: [
	new ESLintWebpackPlugin({
	  context: path.resolve(__dirname, "../src"),
	  exclude: "node_modules",
	  cache: true,
	  cacheLocation: path.resolve(
		__dirname,
		"../node_modules/.cache/.eslintcache"
	  ),
	}),
	new HtmlWebpackPlugin({
	  template: path.resolve(__dirname, "../public/index.html"),
	}),
	new CopyPlugin({
	  patterns: [
		{
		  from: path.resolve(__dirname, "../public"),
		  to: path.resolve(__dirname, "../dist"),
		  toType: "dir",
		  noErrorOnMissing: true,
		  globOptions: {
			ignore: ["**/index.html"],
		  },
		  info: {
			minimized: true,
		  },
		},
	  ],
	}),
	isProduction &&
	  new MiniCssExtractPlugin({
		filename: "static/css/[name].[contenthash:10].css",
		chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
	  }),
	new VueLoaderPlugin(),
	new DefinePlugin({
	  __VUE_OPTIONS_API__: "true",
	  __VUE_PROD_DEVTOOLS__: "false",
	}),
	// 按需加载element-plus组件样式
	AutoImport({
	  resolvers: [ElementPlusResolver()],
	}),
	Components({
	  resolvers: [
		ElementPlusResolver({
		  importStyle: "sass", // 自定义主题
		}),
	  ],
	}),
  ].filter(Boolean),
  optimization: {
	minimize: isProduction,
	// 压缩的操作
	minimizer: [
	  new CssMinimizerPlugin(),
	  new TerserWebpackPlugin(),
	  new ImageMinimizerPlugin({
		minimizer: {
		  implementation: ImageMinimizerPlugin.imageminGenerate,
		  options: {
			plugins: [
			  ["gifsicle", { interlaced: true }],
			  ["jpegtran", { progressive: true }],
			  ["optipng", { optimizationLevel: 5 }],
			  [
				"svgo",
				{
				  plugins: [
					"preset-default",
					"prefixIds",
					{
					  name: "sortAttrs",
					  params: {
						xmlnsOrder: "alphabetical",
					  },
					},
				  ],
				},
			  ],
			],
		  },
		},
	  }),
	],
	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",
		},
	  },
	},
	runtimeChunk: {
	  name: (entrypoint) => `runtime~${entrypoint.name}`,
	},
  },
  resolve: {
	extensions: [".vue", ".js", ".json"],
	alias: {
	  // 路径别名
	  "@": path.resolve(__dirname, "../src"),
	},
  },
  devServer: {
	open: true,
	host: "localhost",
	port: 3000,
	hot: true,
	compress: true,
	historyApiFallback: true, // 解决vue-router刷新404问题
  },
  mode: isProduction ? "production" : "development",
  devtool: isProduction ? "source-map" : "cheap-module-source-map",
  performance: false,
};

posted @ 2023-02-21 14:39 深巷酒阅读(24) 评论(0) 编辑收藏举报

刷新页面返回顶部

深巷酒香

All the growth is a leap in the dark.

系统化学习前端之webpack（进阶）

webpack 高级配置

写在前面

提升开发体验

SourceMap

提升打包构建速度

HotModuleReplacement（HMR）

oneOf

Include/Exclude

Cache

Thead

减少代码体积

Tree Shaking

Babel

Image Minimizer

优化代码运行性能

Code Split

Preload / Prefetch

Network Cache

Core-js

PWA

写在后面

React-cli

Vue-cli

公告