webpack配置文件实践笔记

使用es6 module编写配置文件

使用es6+来编写前端的全部代码（包括配置文件）是一个很不错的体验，es6给我们带来了不仅仅是各种feature更重要的它的模块系统可以让我们从低效的前端模块依赖中解脱出来。使用es6来编写webpack的配置文件只需要下面几步：

1. 安装babel

  yarn add babel-core

2. 创建.babelrc 文件 并且配置对应的plugins

{
  "plugins": [
      "transform-es2015-modules-commonjs", 
      "transform-async-to-generator"
    ]
}

注意：这里的插件只是配置的 transform-es2015-modules-commonjs 和 transform-async-to-generator, 因为webpack本身是运于nodejs环境中的，因此我们只需要转换下模块系统就可以了也就是 es2015-modules --> commonjs

3. 重命名 webpack.config.js 为 webpack.config.babel.js

  // es6  webpack config
 export default {
    entry:'',
    output:{
        // ....
    }
}

4. 参考资源
   1. webpack.config.babel.js
   2. how-can-i-use-es6-in-webpack-config-js

分离配置文件

如果我们是通过 npm 脚本来管理task的话那么对应的脚本大概是下面这样的：

  {
    "scripts":{
        "dev":"webpack-dev-server --env.tag='dev' ", // 开发环境
        "build:test":"webpack --env.tag='test'",  // 测试环境
        "build:pre":"webpack --env.tag='pre'",   // 预发布环境
        "build:preo":"webpack --env.tag='pro'", // 生产环境
    }
  }

可能会更复杂，很好的将对应的配置文件分离出来其实很有必要了。

1. 制定分离策略，我自己是思路如下

   
   webpack流程图
2. 修改webpack入口文件

  import merge from 'webpack-merge';
  export default (env)=>{
      const commonConfig = require('../config/webpack.common.js');
      const envConfig = requilre(`../config/webpack.${env.tag}.config.js`);
      return merge(commonConfig,envConfig)
  }

将配置信息接入到统一配置系统

配置系统 是一个用来管理公司所有项目的配置信息的系统，当我们将webpack的配置信息接入到配置系统的时候那就意味着我们需要在运行webpack期间远程调用接口加载配置文件

修改后的配置文件如下

import axios from 'axios';
async function getConfig(env){
  const config = await axios.get(`http://xxx.xxx.xxx/config/${env.tag}`);
  return config
}
export default (env)=>{
  return getConfig(env);
}

说明

1. 文章涉及的代码纯手写，如有出错请友好提出
2. 以上只是一种解决方案，如您有更好的欢迎分享