dd_pc/vue.config.js

const path = require('path')

function resolve(dir) {
	return path.join(__dirname, dir)
}
const WebpackBundleAnalyzer = require('webpack-bundle-analyzer');
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
	// 选项...
	publicPath: './',
	productionSourceMap: false,
	css: {
		extract: false,
		sourceMap: true,
		loaderOptions: {},
	},
	lintOnSave: false,
	devServer: {
		overlay: {
			warning: false,
			errors: false
		},
		disableHostCheck: true,
	},
	chainWebpack: (config) => {
		// 配置可视化打包结构构成
		if (process.env.use_analyzer) {
			config.plugin('webpack-bundle-analyzer').use(WebpackBundleAnalyzer.BundleAnalyzerPlugin);
		}

		//配置 svg-sprite-loader
		// 第一步：让其他svg loader不要对src/icons进行操作
		config.module
			.rule('svg')
			.exclude.add(resolve('src/icons/svg')) //注意：路径要具体到存放的svg的路径下，不然会报错
			.end()
		// 第二步：使用svg-sprite-loader 对 src/icons下的svg进行操作
		config.module
			.rule('icons')
			.test(/\.svg$/)
			.include.add(resolve('src/icons/svg')) //注意：路径要具体到存放的svg的路径下，不然会报错
			.end()
			.use('svg-sprite-loader')
			.loader('svg-sprite-loader')
			//定义规则 使用时 <svg class="icon"> <use xlink:href="#icon-svg文件名"></use>  </svg>
			.options({
				symbolId: 'icon-[name]'
			})
			.end()
		config.module
			.rule('images')
			.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
			.use('image-webpack-loader')
			.loader('image-webpack-loader')
			.options({ bypassOnDebug: true })	
	},
	configureWebpack: config => {
		let plugins = [
			new CompressionWebpackPlugin({
				filename: '[path].gz[query]',
				algorithm: 'gzip',
				test: new RegExp(
					'\\.(' + ['js', 'css'].join('|') +
					')$',
				),
				threshold: 10240,
				minRatio: 0.8,
			}),
		]
		if (process.env.NODE_ENV !== 'development') {
			config.plugins = [...config.plugins, ...plugins]
		}
	},
}