【webpack】拆分webpack.config.js文件

背景

• 一般情况，一个项目插件比较多，有些配在开发环境，有些配在生产环境，如果全都写在一个webpack.config.js中就会显得很冗余，不好管理，所以一般要拆成三个配置文件，其中一个是生产环境和开发环境共有的，一个是只有生产环境的，一个是只有开发环境的。

流程

一、准备工作

• 首先还是init一下然后装好webpack和webpack-cli。
• 新建个文件夹myconfig，里面建好3个文件webpack.base.js,webpack.prod.js,webpack.dev.js。
• 本文使用的包为:
• webpack
• webpack-cli
• webpack-merge

二、改写脚本命令测试

• 在package.json中改写scripts,让他有一个生产打包命令，一个开发打包命令。

  "scripts": {
    "dev": "webpack --env.development --config ./myconfig/webpack.base.js",
    "prod": "webpack --env.production --config ./myconfig/webpack.base.js"
  },

• --config可以指定哪个文件运行，而env上的development或者production可以在base文件中获取到，从而判断运行的是开发环境还是生产环境。
• 下面改写webpack.base.js

module.exports=(env)=>{
    console.log(env);
}

• 可以拿命令行试验下，打印出一个对象，键名就是设定的development或者production，值是true就对了。

三、 改写配置文件

• 先在src文件夹下建个index.js，写个console.log。
• 老样子还是要配入口出口，这里还需要装个包叫webpack-merge，安装-D方式即可。

const dev = require('./webpack.dev');
const prod = require('./webpack.prod');
const path = require('path');
const merge = require('webpack-merge');


module.exports = (env) => {
    let isdev = env.development;
    const base = {
        entry: path.resolve(__dirname, '../src/index.js'),
        output:{
            filename:'bundle.js',
            path:path.resolve(__dirname,'../dist')
        }
    }    
    if(isdev){
        return merge(base,dev);
    }else{
        return merge(base,prod);
    }
}

• 我们再把dev和prod文件写下，也就是需要压缩的时候就是生产，不需要压缩就是开发，就是配个mode。

module.exports={
    mode:'development'
}

• 另一个文件同理，就是development 改成production。
• 然后运行npm run dev和prod看看生成的是不是一个压缩的一个没压缩的即可。

总结

• 主要是利用webpack --config指定配置文件以及webpackmerge来合并配置项。