Webpack多環境搭建

在實際項目中，每每會由於開發、測試以及生產環境的不一樣來採用不一樣的配置。能夠是接口host不一樣，亦或者是寫入cookie的domain不一樣。

所以，咱們須要對webpack進行不一樣的配置來完成這樣的需求。

在項目中，咱們使用vue-cli 直接初始化的項目，會有 ./build 以及 ./config 兩個文件夾

這裏將webpack的config文件分爲 base，dev，prod。其中，base文件中的參數配置是公用的，dev和prod是不一樣環境的不一樣配置。在合併配置時會用到一個插件webpack-merge，固然，vue-cli init的會自帶，本身安裝的話以下--

npm install webpack-merge --save

開發中，咱們一般會將環境分爲開發，測試，生產。。。先貼段代碼

./config/index

var path = require('path')

module.exports = {
    build: {
            testEnv: require('./test.env'), //測試配置
            prodEnv: require('./prod.env'), // 生產配置
            index: path.resolve(__dirname, '../dist/index.html'),
            assetsRoot: path.resolve(__dirname, '../dist'),
            assetsSubDirectory: 'static',
            assetsPublicPath: './',          //請根據本身路徑配置更改
            productionSourceMap: false,
            productionGzip: false,
            productionGzipExtensions: ['js', 'css']
    },
    dev: {
            env: require('./dev.env'),  //開發配置
            port: 7777,
            autoOpenBrowser: true,
            assetsSubDirectory: 'static',
            assetsPublicPath: '/',
            proxyTable: {},
            cssSourceMap: false
    }
}

在config/index中，將build中的env配置進行修改，增長爲測試和生產環境，本地開發的環境配置不須要修改

webpack.prod.conf.js

...

var env = config.build[process.env.env_config+'Env']
//prod中的修改
...

package.json

"scripts": {
    "dev": "node build/dev-server.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
    "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
  },

config/prod.env.js

module.exports = {
    NODE_ENV: '"production"',
    ENV_CONFIG: '"prod"',
    CONFIG_TEXT: '"我是生產環境哦"',
};

config/test.env.js

module.exports = {
    NODE_ENV: '"production"',
    ENV_CONFIG: '"test"',
    CONFIG_TEXT: '"我是測試環境哦"',
};

#開發調試
npm run dev
#測試環境構建
npm run build:test
#生產環境構建
npm run build:prod

經過執行命令修改NODE_ENV 和 ENV_CONFIG 構建不一樣的配置，須要更多的環境的時候，能夠經過修改config/index的build增長env，packjson增長命令來寫入更多的環境配置

在項目中，咱們能夠直接 process.env.CONFIG_TEXT 獲取到當前環境的參數變量

process.env 是在dev.conf或prod.conf 中plugins 下配置的

new webpack.DefinePlugin({
      'process.env': env
    })

新人，第一次寫博，不喜勿噴哦！