webpack常用配置（二）之拆分配置

在《webpack常用配置（一）》里面是把关于webpack的配置放在了根目录下的webpack.config.js中，但是我们知道在开发环境下和在真正打包上线运行的环境是不一样的，所有我们需要把对webpack的配置拆分成
1.通用配置：webpack.common.js
2.dev配置： webpack.dev.js
3.prod配置：webpack.prod.js
因此我们可以先把之前的webpack.config.js文件删除，在根目录下新建一个build文件夹，并在其中创建上述的三个文件

webpack.common.js

const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__dirname,'..'.'dist')
module.exports={
 entry:{
  path:path.join(srcPath,'index')
 }
}
1
2
3
4
5
6
7
8

由于我们拆分了配置，公共的一些配置项不需要在dev和prod里面再去重新写，所以我们需要把webpack.common.js分别和dev，prod建立连接。
这时需要安装webpack-merge这个插件

npm i webpack-merge -D
1

安装完成后需要在dev和prod里面分别引入
webpack.dev.js

const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')

module.exports=merge(webpackCommonConf,{
 mode:'development'
})
1
2
3
4
5
6
7
8
9

webpack.prod.js

const path=require('path')
const srcPath=path.join(__direname,'..','src')
const distPath=path.join(__direname,'..','dist')
const {merge}=require('webpack-merge')
const webpackCommonConf=require('./webpack.common')

module.exports=merge(webpackCommonConf,{
  mode:'production'
  output:{
    filename:'bundle.[contentHash:8].js',
    path:path.join(distPath)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

然后我们还要修改package.json中build命令

"scripts":{
  "build":"webpack --config build/webpack.prod.js"
 }
1
2
3

以上完成了简单的配置拆分