dd_pc/vue.config.js

const path = require('path')

function resolve(dir) {
	return path.join(__dirname, dir)
}
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const DEV = process.env.NODE_ENV == 'production';
module.exports = {
	// 选项...
	publicPath: './',
	productionSourceMap: false,
	css: {
		extract: false,
		sourceMap: true,
		loaderOptions: {},
	},
	lintOnSave: false,
	devServer: {
		overlay: {
			warning: false,
			errors: false
		},
		disableHostCheck: true,
	},
	chainWebpack: (config) => {
		// 移除 prefetch 插件
		config.plugins.delete('prefetch')
		// 移除 preload 插件
		config.plugins.delete('preload');
		// ============压缩图片 start============
		config.module
			.rule('images')
			.use('image-webpack-loader')
			.loader('image-webpack-loader')
			.options({bypassOnDebug: true})
			.end()
		// ============压缩图片 end============
		
		//配置 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()
	},
	configureWebpack: config => {
		if(DEV){
			config.plugins.push(
				new UglifyJsPlugin({
					uglifyOptions: {
						//生产环境自动删除console
						compress: {
							drop_debugger: true,
							drop_console: true,
							pure_funcs: ['console.log']
						}
					},
					sourceMap: false,
					parallel: true
				})
			)
		}
		config.optimization.splitChunks = {
			cacheGroups: {
				vendors: {
					chunks: 'all',
					name: "chunk-vendors",
					test: /[\\/]node_modules[\\/]/,
					chunks: "initial",
					priority: 2,
					reuseExistingChunk: true,
					enforce: true
				},
				elementUI: {
					chunks: 'all',
					name: "stabled-elementui",
					test: /[\\/]node_modules[\\/]element-ui[\\/]/,
					priority: 3,
					reuseExistingChunk: true,
					enforce: true
				},
				echarts: {
					chunks: 'all',
					name: "stabled-echarts",
					test: /[\\/]node_modules[\\/]echarts[\\/]/,
					priority: 4,
					reuseExistingChunk: true,
					enforce: true
				},
				vue: {
					name: 'stabled-vue',
					test: /[\\/]node_modules[\\/]vue[\\/]/,
					chunks: "all",
					priority: 5,
					reuseExistingChunk: true,
					enforce: true
				},
				vuex: {
					name: 'stabled-vue',
					test: /[\\/]node_modules[\\/]vuex[\\/]/,
					chunks: "all",
					priority: 6,
					reuseExistingChunk: true,
					enforce: true
				},
				'vue-router': {
					name: 'stabled-vue',
					test: /[\\/]node_modules[\\/]vue-router[\\/]/,
					chunks: "all",
					priority: 7,
					reuseExistingChunk: true,
					enforce: true
				},
				zrender: {
					name: "stabled-zrender",
					test: /[\\/]node_modules[\\/]zrender[\\/]/,
					chunks: "all",
					priority: 8,
					reuseExistingChunk: true,
					enforce: true
				}
			}
		}
	},

}