jp-charge/vue.config.js

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: 'localhost',
		port: 8080,
		//解析缓存
		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";`
			}
		}
	}
};