採用淘寶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文件夾內

代碼說明：