webpack教程（二）——配置拆分合并

1 前言

第一篇webpack基础教程：《最简单的webpack入门教程》

2 基础配置

2.1 新建文件

在根目录底下创建build文件夹，在底下新增三个文件：

• webpack.base.config.js 基础配置
• webpack.dev.config.js 开发打包配置
• webpack.prod.config.js 生产环境打包配置

创建文件

2.2 webpack.base.config.js

用来做webpack基础配置，直接将原来webpack.config.js中的配置拿过来，需要注意的是原来的webpack.config.js文件在根目录底下，webpack.base.config.js是在build文件夹底下，需要修改一下配置中的路径：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'production',
  // 入口文件
  entry: path.resolve(__dirname, '../src/index.js'),
  // 输出文件
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../src/index.html'),
      filename: 'index.html'
    })
  ],
  devServer: {
    // 端口
    port: 8090,
    // 静态资源目录
    static: path.resolve(__dirname, '../dist')
  }
}

3 配置合并

3.1 安装插件

先安装webpack配置合并插件webpack-merge：

npm install webpack-merge --save-dev

3.2 webpack.dev.config.js

引入公共配置webpack.base.config.js：

const commonConfig = require('./webpack.base.config')

编写开发环境需要的配置，比如把mode设置为development：

const devConfig = {
  mode: 'development'
}

然后使用插件webpack-merge的merge方法合并公共配置和开发特有配置并导出配置：

module.exports = merge(commonConfig, devConfig)

全部代码如下：

const commonConfig = require('./webpack.base.config')
const { merge } = require('webpack-merge')

const devConfig = {
  mode: 'development'
}

module.exports = merge(commonConfig, devConfig)

3.3 webpack.prod.config.js

相同的，编写生产环境webpack配置：

const commonConfig = require('./webpack.base.config')
const { merge } = require('webpack-merge')

const prodConfig = {
  mode: 'production'
}

module.exports = merge(commonConfig, prodConfig)

4 查看效果

4.1 package.json

在package.json中的scripts底下新增两个命令来调用我们的两个配置：

"build:dev": "webpack --config ./build/webpack.dev.config.js",
"build:prod": "webpack --config ./build/webpack.prod.config.js"

前面的dev和build命令就不改动了：

package.json

注：现在build和build:prod虽然分别使用的是根目录底下的webpack.config.js配置和build文件夹底下的webpack.prod.config.js配置，但是目前两个配置一样所以其实效果是相同的，所以也可以直接把build命令覆盖掉：

"build": "webpack --config ./build/webpack.prod.config.js"

4.2 输入命令

在命令行中输入：

npm run build:dev

打出来的包是没有压缩的，bundle.js文件：

bundle.js

index.html也是多行的：

index.html

使用另一个配置：

npm run build:prod

打出来的内容不一样了，bundle.js文件就一行了：

bundle.js

index.html也只有一行了：

index.html

5 源码

和上一篇教程的源码合一起了：

https://github.com/chrischen0405/webpack-demo