正文

看过之前几章内容的都应该知道，我们所有的配置都放在了webpack.config.js文件里面，实际开发中在不同环境下打包项目，使用的配置是不同的，这样能够找到一个即利于开发环境(development)下调试代码，更利用生产环境(production)下打包速度。这节我们就基于之前的配置内容拆分出webpack.dev.js 和webpack.prod.js

在项目目录下创建config 文件夹并在里面创建一下文件
- webpack.common.js
- web pack.dev.js
- web pack.prod.js
把所有配置拷贝至`webpack.common.js

webpack-merge

安装 webpack-merge

npm i -D webpack-merge

分别在webpack.dev.js 和webpack.prod.js文件里面添加如下代码

const path = require('path')
const {
  merge
} = require('webpack-merge')
const commonConfig = require('./webpack.common')

# 自定义命名
const devConfig = {
  
}

module.exports = merge(commonConfig, devConfig)

迁移代码

# webpack.dev.js
# 在 devConfig 添加如下内容 并在 webpack.common.js 里面删除这些内容

const devConfig = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      port: 8080,
      open: true, // 是否打开浏览器
      hot: true,
  },
  plugins: [
      new Webpack.HotModuleReplacementPlugin()
  ]
}

很容易分析出来，只有在开发环境我们才会使用的devServer 所以在生产环境下这些内容是没必要的。只把他放在 webpack.dev.js 文件里面

# webpack.dev.js
const {
    merge
} = require('webpack-merge')
const commonConfig = require('./webpack.common')

const prodConfig = {
    mode: 'production',
    devtool: 'cheap-module-source-map'
}

module.exports = merge(commonConfig, prodConfig)

修改package.json

"scripts": {
    "start": "webpack-dev-server --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js",
    "build:dll": "webpack --config ./config/webpack.dll.js"
  },

结束

本文介绍了webpack-merge的使用方法，并且使用webpack-merge拆分了webpack 的配置，是配置耦合度降低，删除在不同环境下多余的配置。下一章介绍多文件的打包配置

WebPack基础入门(五)：多环境配置

推荐阅读

正文

结束