【webpack】快速笔记22 -- 使用环境变量重新修改打包配置文件（番外篇）

前言

在 【webpack】快速笔记13 – development和production模式的区分打包 我们就分配了开发和生产环境的配置，并且通过webpack-merge整合提取的公共部分

使用环境变量修改配置

开始：

我们一步一步来，先修改生产和开发的配置，两个都是一样的更改方式，这里就展示一个另外一个一样的处理方法 ↓

webpack.dev.js:

const webpack = require('webpack');
//  - 注释两个引入
// const merge = require('webpack-merge');
// const commonConfig = require('./webpack.common.js');

// module.exports = merge(commonConfig, devConfig);  // - 注释
module.exports = devConfig;   // +— 更改

然后我们改webpack.common.js：

// + 新增
const merge = require('webpack-merge');
const devConfig = require('./webpack.dev');
const prodConfig = require('./webpack.prod');

const commonConfig = {
     
	...
}

module.exports = (env) => {
     
    if(env && env.production){
     
        return merge(commonConfig, prodConfig);
    }else{
     
        return merge(commonConfig, devConfig);
    }
}

根据外部传入的变量env来判断执行merge哪个环境的配置，那哪里传入呢？

在package.json中配置变量env：

"scripts": {
     
  "dev": "webpack-dev-server --config ./build/webpack.common.js",
  "build": "webpack --config ./build/webpack.common.js",
  "start": "webpack --env.production --config ./build/webpack.common.js"
}

完成：
现在就可以通过一个变量进行相同配置文件中通过判断进行不同环境的打包~

结语

这是一篇番外篇，后续可能不采用这种进行demo演示，这篇主要简单介绍一下如何使用在package.json中传递变量执行不同环境的配置，毕竟有些框架可能会使用这种方式去分配环境，主要看完这篇文章可以认识到对应的知识即可~

#下一篇【使用Library打包一个库~】