cool-admin-vue/vue.config.js

const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
const isProduction = process.env.NODE_ENV === "production";

// 代理列表
const PROXY_LIST = {
	"/dev": {
		target: "http://127.0.0.1:8001",
		changeOrigin: true,
		pathRewrite: {
			"^/dev": ""
		}
	},

	"/pro": {
		target: "https://show.cool-admin.com",
		changeOrigin: true,
		pathRewrite: {
			"^/pro": "/api"
		}
	}
};

module.exports = {
	publicPath: "/",
	lintOnSave: true,
	productionSourceMap: false,
	parallel: require("os").cpus().length > 1,

	css: {
		extract: isProduction,
		sourceMap: false,
		loaderOptions: {
			sass: {
				prependData: `@import "@/assets/css/common.scss";`
			}
		}
	},

	devServer: {
		port: 9000,
		open: false,
		compress: false,
		overlay: {
			warnings: false,
			errors: true
		},
		disableHostCheck: true,
		proxy: PROXY_LIST
	},

	chainWebpack: config => {
		// 设置环境变量
		config.plugin("define").tap(args => {
			args[0]["process.env"].PROXY_LIST = JSON.stringify(PROXY_LIST);
			return args;
		});

		// 设置 svg
		config.module.rule("svg").uses.clear();

		config.module
			.rule("svg-sprite-loader")
			.test(/.svg$/)
			.exclude.add(/node_modules/)
			.end()
			.use("svg-sprite-loader")
			.loader("svg-sprite-loader")
			.options({
				symbolId: "[name]"
			});

		// 生产模式下
		if (isProduction) {
			// 去掉元素之间空格
			config.module
				.rule("vue")
				.use("vue-loader")
				.loader("vue-loader")
				.tap(options => {
					options.compilerOptions.preserveWhitespace = true;
					return options;
				})
				.end();

			// 移除 prefetch 插件
			config.plugins.delete("prefetch-index");

			// 移除 preload 插件，避免加载多余的资源
			config.plugins.delete("preload-index");

			config.optimization.minimizer("terser").tap(args => {
				// 去掉注释
				args[0].terserOptions.output = {
					comments: false
				};
				return args;
			});

			// 分割模块
			config.optimization.splitChunks({
				chunks: "all",
				maxInitialRequests: Infinity,
				minSize: 300000,
				automaticNameDelimiter: "-",
				cacheGroups: {
					vendor: {
						test: /[\\/]node_modules[\\/]/,
						name(module) {
							const packageName = module.context.match(
								/[\\/]node_modules[\\/](.*?)([\\/]|$)/
							)[1];
							return `chunk.${packageName.replace("@", "")}`;
						},
						priority: 10
					}
				}
			});
		}
	},

	configureWebpack: config => {
		// 构建缓存
		config.plugins.push(new HardSourceWebpackPlugin());
	}
};