采用淘宝wefe模板构建项目及多环境配置

• 一、构建步骤及信息

1）wefe地址：https://npm.taobao.org/package/wefe
2）wefe模板构建项目：wefe init [template] [projectName] [projectPath]
    如：wefe init vue cc-front
3）执行上面命令后即项目构建完成，并且依赖自动添加完成，可以直接启动访问；
    但在启动是却提示vue以来问题，如：提示vue-template-compiler版本问题，原因是因为wefe提供的vue-template-compiler模板过低的原因，解决方法：直接安装当前模块即可：npm install vue-template-compiler
    然后再重新启动项目，则启动成功，访问正常
4）多环境配置：淘宝wefe官网只提供了如下代码：
    let webpackConfig = util.findConfig();
    let envConfig = Object.assign({}, webpackConfig[`${env}Config`]);
    webpackConfig = merge(webpackConfig, envConfig);

    意思是不同环境配置不同的`${env}Config`文件和公用的webpackConfig文件，项目启动或打包时通过加载配置文件（通过当前环境的配置文件去覆盖公共webpackConfig文件里面的部分内容）形式实现多环境配置

    为什么需要配置多环境：一般来说，开发中有三个环境，开发环境（dev）、测试环境(test)、线上环境(pro或idc)；1、项目在发布到不同环境，会存在一些系统参数，而这些参数在各自环境对应的值却不是相同的；2、项目打包各自环境时也会涉及到一些访问路径问题；若采用单一的配置文件，不利于项目的自动化部署，加大了后期项目发布的工作量

• 二、多环境配置

1、环境代码（配置文件：dev.wefe.config.js，其他环境创建各自的配置文件）：

const webpack = require('webpack')
const path = require('path')

module.exports = {
  baseConfig: { // 用作打包项目时生成最终的文件信息
    cCategory: false, // 关闭文件分类
    cExt: false, // 关闭文件扩展命名
    page: 'pages', // 多页分析路径 -> src/pages
    entry: 'main', // 多页入口分析 -> src/pages/index/main.js
    dist: path.resolve(`${process.cwd()}/dist/`), // 编译路径
    publicPath: './' // 资源路径
  },
  webpack: { // 用于设置各个环境的变量
    plugin: {
      "DefinePlugin": {
        plugin: webpack.DefinePlugin,
        args: [
          {
            processVariable: {
              env: {
                'API_PATH': "'/isou/cc-gateway'",
                'PAASID': "''",
                'X_TIF_UID': "'1234235243624623'",
                'VERSION': "'dev'"
              }
            }
          }
        ]
      }
    }
  }
}

2、修改wefe.config.js文件配置

// wefe中已经安装过的npm包，在此项目中不需要安装；如若安装以此项目中的为准；
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const path = require('path');

const devServerPort = 9397;

const exportsData = {
  webpack: {
    // 单个入口文件
    entry: {
      'index': './src/app.js'
    },
    // 出口文件（打包时生成最终文件的配置信息）
    output:{
      // [name]是动态的，其中name指向entry对象的key
      filename:'[name].bundle.js',
      // filename:'[name].bundle-[hash].js',
      // 注意：__这是两个英文下划线！
      // 出口文件保存在当前目录下的dist目录下。注：dist指distribution 分发的意思
      path:__dirname + '/dist'
    },
    plugin: {
      "OpenBrowserPlugin": {
        plugin: OpenBrowserPlugin,
        args: [{
          url: 'http://127.0.0.1:9397/local/#/index'
        }]
      }
    },
    // 本地开发服务配置
    devServer: {
      port: devServerPort,
      // host: '127.0.0.1',
      host: '0.0.0.0',
      contentBase: './dist',
      compress: true,
      historyApiFallback: true,
      disableHostCheck: true,
      // publicPath: '/isousuos-front/',
      headers: {
        'X-Custom-Foo': 'bar',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
        'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
      },
      proxy: {
        // '/cc-gateway/*': {
        //   target: 'http://192.168.1.238',
        //   changeOrigin: true,
        //   secure: false,
        // }

        // '/cc-gateway/*': {
        //   target: 'http://127.0.0.1:18080',
        //   changeOrigin: true,
        //   secure: false,
        //   pathRewrite: {'^/cc-gateway/' : '/'}
        // }
      }
    },
    resolve: {
      alias: {
        '@platform': 'platform',
        '@_src': path.join(__dirname, "src")
      },
      modules: ['./src', './node_modules'],
    }
  },
  // 打包发布配置
  baseConfig: {
    cCategory: false, // 关闭文件分类
    cExt: false, // 关闭文件扩展命名
    page: 'pages', // 多页分析路径 -> src/pages
    entry: 'app', // 多页入口分析 -> src/pages/index/main.js
    dist: path.resolve(`${process.cwd()}/dist/`), // 编译路径
    publicPath: './' // 资源路径
  },
  beginAction: [
    function (options) {
      console.log('=====>beginAction:', options)
    },
    {
      key: 'test'
    }
  ],
  endAction: [
    function (options) {
      console.log('=====>endAction:', options)
    },
    {
      key: 'test'
    }
  ],
  presets: [
    'wefe-fix-vue',
    'wefe-fix-babel',
    'wefe-fix-eslint'
  ]
};
// 获取打包或启动环境信息（默认dev环境）
getEnv=()=>{
  let env = 'dev'
  const config_argv = process.env.npm_config_argv
  if(config_argv){
    const argvs = JSON.parse(config_argv).original;
    // 下面的步骤就是获取命令行参数。
    env = argvs.slice(2)[0] ? argvs.slice(2)[0].substring(2) : 'dev';
  }
  return env
}
// 按环境引入配置
const envConfig = require(`./config/${getEnv()}.wefe.config`);
getConfigExports=()=>{
  let _exportsData = { ...exportsData }
  // 多环境变量设置
  _exportsData.webpack.plugin = Object.assign(exportsData.webpack.plugin, envConfig.webpack.plugin)
  // 多环境发布设置
  _exportsData.baseConfig = Object.assign(exportsData.baseConfig, envConfig.baseConfig)
  return _exportsData
}
module.exports = getConfigExports()

我的环境配置文件时放在项目根目录下的config文件夹内

代码说明：