Webpack开发与生产环境并行配置方法
Webpack 的开发和生产环境配置，其实没你想得那么麻烦。关键在于分清楚啥是开发依赖，啥是生产依赖，再用点小技巧把它们拆开配置，既方便调试，又不拖累上线包的性能。像用npm install --save-dev这种命令，就能把工具类的包放进开发依赖里，打包时就不会带上它们。
Webpack 的scripts字段挺好用的。你可以设置两个命令，一个是npm run dev，跑开发模式；另一个是npm run build，跑生产环境。简单直接，切换起来方便，开发体验也好。
再说webpack.config.js的写法，一般用env或者process.env来判断当前是开发还是生产。根据这个开关来决定要不要压缩、要不要提 CSS、要不要加 source map。配置一套逻辑，两个环境都能跑，省心多了。
插件选得好，事半功倍。HtmlWebpackPlugin开发时加个自动刷新，舒服；上线时加压缩也方便。TerserPlugin、ExtractTextPlugin、PurifyCSSPlugin这些也都是为生产环境优化准备的，按需启用就行。
环境变量的写法，有点小区别。Windows 下用set type=dev && webpack，Mac 和 Linux 用export type=dev && webpack。记住这个小差异，部署的时候就不踩坑。
如果你经常切换环境、打包过程更清晰，推荐你把开发和生产配置拆开写，用webpack-merge来合并也是个不错的方式。
文件大小：51.03KB
评论区