Webpack多環境搭建

weixin_34127717發表於2017-12-21
Web

在實際專案中，往往會因為開發、測試以及生產環境的不同來採用不同的配置。可以是介面host不同，亦或者是寫入cookie的domain不同。

因此，我們需要對webpack進行不同的配置來完成這樣的需求。

在專案中，我們使用vue-cli 直接初始化的專案，會有 ./build 以及 ./config 兩個資料夾

vue-cli初始化

這裡將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
    })

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

相關文章