JP-ChargeTeam51/vue.config.js

if(process.env.NODE_ENV === "production"){
	
	const path = require('path');
	const webpack = require('webpack')
	
	const CompressionWebpackPlugin = require("compression-webpack-plugin")
	const productionGzipExtensions = ['js', 'css']
	
	function resolve(dir) {
		return path.join(__dirname, dir)
	}
	
	const Timestamp = new Date().getTime();
	module.exports = {
		publicPath: './',
		outputDir: 'dist/' ,
		assetsDir: 'static',
		lintOnSave: false,
		devServer: {
			host: 'xpgj.xiaoxinda.com',
			port: 80,
			//解析缓存
			disableHostCheck: true,
			//支持gzip
			compress: true,
		},
		//不输出map
		productionSourceMap: false,
		chainWebpack: (config) => {
			config.entry.app = ['babel-polyfill', './src/main.js']
			config.resolve.alias
				.set('@', resolve('./static/'))
	
			config.plugins.delete('preload-index');
			config.plugins.delete('prefetch-index');
			
			config.module.rule('images')
			           .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
			           .use('url-loader')
			           .loader('file-loader')
			           .options({
			               name: 'static/img/[name].[hash:8].[ext]'
			           })
					
			config.optimization.minimize(true);
		},
		configureWebpack: config => {
			/* //开启gzip压缩,需要配置Nginx服务器gzip选项开启
			config.plugins.push(
				new CompressionWebpackPlugin({
					filename: '[path].gz[query]',
					algorithm: 'gzip',
					test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
					threshold: 10240,
					minRatio: 0.8
				})
			); */
	
				config.plugins.push(new webpack.ProgressPlugin(percentage => {
					percentage === 1 ? console.log('编译完成：100.00%') : console.log(`编译进度：${(percentage * 100).toFixed(2)}%`)
				}));
			config.output.filename = `./static/js/[name].${Timestamp}.js`
			config.output.chunkFilename = `./static/js/[name].${Timestamp}.js`
	
			config.performance = {
				hints: 'warning',
				//入口起点的最大体积 整数类型（以字节为单位）
				maxEntrypointSize: 50000000,
				//生成文件的最大体积 整数类型（以字节为单位 300k）
				maxAssetSize: 30000000,
				//只给出 js 文件的性能提示
				assetFilter: function(assetFilename) {
					return assetFilename.endsWith('.js');
				}
			}
		},
		css: {
			extract: {
				filename: `./static/css/[name].${Timestamp}.css`,
				chunkFilename: `./static/css/[name].${Timestamp}.css`
			},
			sourceMap: false,
			loaderOptions: {
				// 给 sass-loader 传递选项
				sass: {
					// @/ 是 src/ 的别名
					// prependData: `@import "@/assets/scss/base.scss";`
				}
			}
		}
	};
	
}