在生产环境和开发环境中有许多存在不一致的情况
例如在开发环境中没有必要设置缓存,生产环境还需要设置公共路径等
在开发环境中,追求强大的开发效率和开发功能
在生产环境中,追求更小更轻量级的bundle的打包产物
公共路径
publicPath可以指定应用程序中所有路径的基础路径(给资源加入域名)
环境变量
environment variable可以消除开发环境和生产环境间的差异
首先需要将module.exports改写为返回一个函数,这样子可以使用用户配置时传的参数
例如打包命令npx webpack --env production
,那么就可以使用env.production
此值为true
将mode配置成mode: env.production? 'production':'development',
效果:生产环境会压缩代码,开发环境不会压缩代码;
terser插件
该插件是webpack开箱即用的插件,但如果你在optimization中配置了minimizer(配置了压缩css代码的插件),那么需要自己npm一下terser插件,重新配置
安装npm install terer-webpack-plugin -D
const TerserPlugin = require('terser-webpack-plugin')
optimization:{
minimizer:[
new CssMinimizerPlugin(),
new TerserPlugin()
],
}
拆分配置文件
使用两个配置文件来拆分生产环境和开发环境
例如生产环境不需要:
1.输出文件的文字[contenthash]
2.不需要publicPath
3.不需要压缩css与js文件
开发环境不需要
1.devtool:‘inline-source-map’
2.不需要devServer
打包时使用config命令区分
命令npx webpack --config ./config/webpack.config.dev.js
【warning】entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
打包体积过大
performance: {
// 入口起点的最大体积
maxEntrypointSize: 50000000,
// 生成文件的最大体积
maxAssetSize: 30000000,
},
npm脚本
每次打包或启动服务时,都需要在命令行里输入一长串的命令。不太方便,需进行优化。
"scripts": {
"start":"webpack serve -c ./config/webpack.config.dev.js",
"build":"webpack -c ./config/webpack.config.prod.js"
},
两个配置文件中存在大量重复代码,所以可以将一些公共的配置抽离出来
webpack.config.common.js一些公共配置
webpack.config.dev.js开发环境
webpack.config.prod.js生产环境
webpack.config.js合并文件
安装npm install webpack-merge
修改命令,文件和加上个–env
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack serve -c ./config/webpack.config.js --env development",
"build":"webpack -c ./config/webpack.config.js --env production"
},