webpack不同环境的配置

webpack不同环境的配置

前提条件：
  在我们开发项目时，一般会有开发环境与生产环境，不同环境对应不同的url地址或者一些其他配置，这时候，我们就需要不同的config配置文件相结合的形式来完成配置需求。

解决方法：

1. 首先我们可以先建立3个不同的配置文件，分为webpack.base.config.js(配置基础内容)，webpack.dev.config.js(配置开发相关内容)和webpack.prod.config.js(配置生产环境相关内容)。

2. 安装merge

   yarn add webpack-merge -D
   

3. 配置webpack.dev.config.js文件：

   const {merge} = require('webpack-merge');
   const baseConfig = require('./webpack.base.config.js')
   
   // 使用merge将base文件与当前配置文件合并
   module.exports = merge(baseConfig,{ 
       mode:'development',   //开发环境
       devServer:{
   
       },
       devtool:'source-map',
       // ...等等一些开发环境需要单独配置的内容
   })
   

4. 配置webpack.prod.config.js文件：

   const {merge} = require('webpack-merge');
   const baseConfig = require('./webpack.base.config.js')
   
   // 使用merge将base文件与当前配置文件合并
   module.exports = merge(baseConfig,{
       mode:'production',     //生产环境
       // ...等等一些生产环境需要单独配置的内容
   })
   

5. 在webpack.base.config.js文件中配置一些公用内容，如入口、出口、服务、模块、插件等等即可。

   (o゜▽゜)o☆