Webpack：配置分离

1. 为什么需要将配置分离

因为在我们写代码时，存在两个环境。
一个是开发环境（development），一个是生产环境（production）。
开发环境：开发时方便进行调试与运行所需的环境，比如本地的服务器运行。
生产环境：最后webpack打包所需要的环境，比如js的压缩。
所以为了遵循逻辑分离，方便后续的处理，通常将它们分为三个文件

base.config.js ：基础配置文件，开发和生产都需要用到的配置
prod.config.js：生产配置文件，生产时才需要用到的文件
dev.config.js: 开发配置文件，开发时才需要用到的文件

---

2. 使用

由于将配置文件分为了三个文件，因此我们需要借助一个工具来合并文件（webpack-merge）

开发运行时：合并 base.config.js 和 dev.config.js文件
生产打包时：合并 base.config.js 和 prod.config.js文件

安装：

npm install webpack-merge --save-dev

使用：
通过解构用到 webpack-merge里面的merge方法
dev.config.js

const {
      merge } = require('webpack-merge')
const baseConfig = require('./base.config.js')
module.exports = merge(baseConfig, {
     
  devServer: {
     
    contentBase: '../dist',
    inline: true
  }
})

prod.config.js

const uglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin')
const merge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = merge(baseConfig, {
     
  plugins: [
    new uglifyJsWebpackPlugin()
  ],
})

---

更改package.json脚本运行

由于我们新建了个build文件夹用于存放三个文件，运行文件也发生了改变，因此需要进行以下配置

  "scripts": {
     
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },