vue.config.js常用配置

/**
 * 自适应
 * remUnit 基准大小 baseSize
 */
const px2rem = require('postcss-px2rem')
const postcss = px2rem({
  remUnit: 100 
})

/**
 * 打包路径/本地引用路径
 */
const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}
const BASE_URL = process.env.NODE_ENV === 'production' ? './' : './'

/**
 * 打包后去掉注释/文件过大进行压缩
 * UglifyJsPlugin webpack去掉注释插件
 * CompressionWebpackPlugin webpack压缩插件
 */
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin'); // 版本 ===>>  6.1.1
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  filenameHashing: true,  //是否在文件名中包含了 hash 以便更好的控制缓存
  publicPath: BASE_URL,
	lintOnSave: false, // 如果不需要使用eslint，把lintOnSave设为false即可
	productionSourceMap: false,  // 设为false打包时不生成.map文件

  chainWebpack: config => { 
		config.resolve.symlinks(true); // 热更新
		config.resolve.alias // key,value自行定义，比如.set('@@', resolve('src/components'))
			.set('@', resolve('src')) 
			.set('_c', resolve('src/components'))
  },

  configureWebpack: config => {
		const plugins = [];
		if (isProduction) {

           // 去掉注释以及相关打印
			plugins.push(
				new UglifyJsPlugin({
					uglifyOptions: {
						output: {
							comments: true, // 去掉注释
						},
						warnings: false,
						compress: {
							drop_console: true, // 去除 console
							drop_debugger: true, // 去除 debugger
							pure_funcs: ['console.log','debugger'] //移除console
						}
					}
				})
			);

            // 开启gzip
			plugins.push(  
				new CompressionPlugin({
					filename:'[path].gz[query]',
					algorithm: 'gzip',
					test: /\.(js|css|map|json|ttf|otf)$/,  // 匹配文件名
					threshold: 1024*10,  // 对超过10k的数据压缩
					deleteOriginalAssets: false,  // 不删除源文件
					minRatio: 0.8   // 压缩比
				})
			)

			// 取消webpack警告的性能提示
			config.performance = {
				hints: 'warning',
				maxEntrypointSize: 1024 * 500,  //入口起点的最大体积
				maxAssetSize: 1024 * 1000,  //生成文件的最大体积
				assetFilter: function (assetFilename) {
					return assetFilename.endsWith('.js');  //只给出 js 文件的性能提示
				}
			};
			
			// 开启分离js
			config.optimization = {  
				runtimeChunk: 'single',
				splitChunks: {
					chunks: 'all',
					maxInitialRequests: Infinity,
					minSize: 1024 * 60,
					cacheGroups: {
						vendor: {
							test: /[\\/]node_modules[\\/]/,
							name(module) {
								const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
								return `npm.${packageName.replace('@', '')}`
							}
						}
					}
				}
			}  
		}
		return {plugins}
	},

  // css预设器配置项
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    },
    extract: true,  // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
	sourceMap: false,  // 开启 CSS source maps?
	requireModuleExtension: true, // 启用 CSS modules for all css / pre-processor files.
	// modules: false,
  },

	// 网络配置项
  devServer: {
		hot: true,
        open:true,
        port: xxxx,
        host: '0.0.0.0',
		https:false,
		hotOnly:true,
		noInfo: false,
		proxy:{
			'/api' : {
				target:'http://localhost:xxxx',
				changOrigin: true,//允许跨域
			}
		}
  },
}