8.2 不同环境的区分

这一节的代码位于 08_path_env/8_2_diff_env

我们希望有配置可以自动区分开发环境和线上环境

webpack.DefinePlugin

• 首先需要一个全局变量来定义是什么环境, 可以用webpack自带的DefinePlugin
• 文档 https://webpack.js.org/plugins/define-plugin/#root
• 配置webpack
• 
• 然后就可以写点代码测试:
• 

不同环境配置 webpack-merge

• 在项目下新建两个webpack配置文件用于书写不同环境
• 
• 安装webpack-merge插件可以合并webpack配置, yarn add webpack-merge -D
• 文档: https://webpack.js.org/guides/production/#setup
• 配置不同环境的webpack:

• 

• 

• 此时用不同的webpack运行命令配置来指定使用的环境配置:

• 

• 开发时命令 npm run dev -- --config webpack.dev.js

• npm run build -- --config webpack.dev.js 并查看打包后结果

• 

• npm run build -- --config webpack.prod.js

• 

• 借此就可以将开发和生成环境的配置区分开, 开发环境可以加入开发服务器配置, 如跨域, 源码映射等, 生产环境可以加入打包优化, 压缩等配置