const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 清除注释
const CompressionWebpackPlugin = require('compression-webpack-plugin'); // 开启压缩
// 是否为生产环境
const isProduction = process.env.NODE_ENV === 'production';
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// 本地环境是否需要使用cdn
const devNeedCdn = true;
// cdn链接
const cdn = {}
module.exports={
publicPath: '/',
assetsDir: "assets",
devServer: {
open: true, // npm run serve后自动打开页面
host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0)
// port: 8066, // 开发服务器运行端口号
proxy: {
'/api': { // 以'/api'开头的请求会被代理进行转发
target: 'http://localhost:6688',
changeOrigin: true
}
},
disableHostCheck: true,
},
//去除生产环境的productionSourceMap
productionSourceMap: false,
chainWebpack: config => {
// ============注入cdn start============
config.plugin('html').tap(args => {
// 生产环境或本地需要cdn时,才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
// config.plugin('webpack-bundle-analyzer') // todo 查看打包文件体积大小1
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
// ============注入cdn end============
},
configureWebpack: (config) => {
// 用cdn方式引入,则构建时要忽略相关资源
const plugins = [];
if (isProduction || devNeedCdn){
config.externals = cdn.externals
config.mode = 'production';
config["performance"] = {//打包文件大小配置
"maxEntrypointSize": 10000000,
"maxAssetSize": 30000000
}
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: false,
drop_debugger: false,
// pure_funcs: ['console.log']//移除console
}
}
})
)
// 服务器也要相应开启gzip
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.(js|css)$/,// 匹配文件名
threshold: 10000, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 不删除源文件
minRatio: 0.8 // 压缩比
})
)
// todo 查看打包文件体积大小2
config.plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerHost: 'localhost',
analyzerPort: 8889, // 修改为其他未被占用的端口
openAnalyzer: true,
})
)
}
}
}