webpack 巧解環境配置問題

項目的開發和測試和生產環境通常都不是同一個，有時候就會產生須要前端項目須要根據不一樣的環境進行不一樣的配置的狀況。比較經典的狀況就是後端的接口 hostname 的問題。在開發環境的時候可能使用的是 dev.api.xx.com，測試環境須要使用 test.api.xx.com，而線上環境須要使用 api.xx.com。那麼如何根據環境來動態的在文件中變動這個值而不用咱們手動的在服務器上修改代碼呢？咱們能夠利用 webpack module shim 的一些方法。

就拿上文中的例子，咱們如何在不一樣環境編譯的時候使用不一樣的 API 地址。webpack shim module 一共有好幾種方法，咱們來看下均可以怎麼解決。

ProvidePlugin

ProvidePlugin 可讓變量直接在模塊里加載而不須要使用 require 等方法。因此咱們能夠預先定義一些模塊根據不一樣的環境裝載不一樣的模塊：

//development.js
module.exports = { baseUrl: 'http://dev.api.xx.com' };

//production.js
module.exports = { baseUrl: 'http://api.xx.com' };

//test.js
module.exports = { baseUrl: 'http://test.api.xx.com' };

//webpack.config.js
var webpack = require("webpack");
module.exports = {
    entry: "main.js",
    output: {path: "./", filename: "bundle.js"},
    plugins: [
        new webpack.ProvidePlugin({
            ENV: "./env/"+ (process.env.NODE_ENV || "development")
        })
    ]
};

而後咱們在環境變量中定義 NODE_ENV 變量幫助 node 識別環境，例如：

//Windows
set NODE_ENV=test 
//Linux or OSX
export NODE_ENV=test

這樣在 webpack 編譯的時候就能判別出是 test 環境使用 test 的環境變量了，咱們直接在代碼中使用 ENV.baseUrl 便可。

imports-loader

若是以爲使用 ProvidePlugin 略微麻煩的話咱們也可使用 imports-loader 來實現咱們須要的功能。imports-loader 的做用是將變量注入到模塊中，首先咱們須要 npm install imports-loader 安裝這個 loader。在 webpack.config.js 中咱們進行以下操做：

var API = {
    test: 'http://test.api.xx.com',
    production: 'http://api.xx.com',
    development: 'http://dev.api.xx.com'
};

module.exports = {
    entry: "main.js",
    output: {path: "./", filename:"bundle.js"},
    module: {
        loaders: [
            { 
                test: require.resolve('ajax'),
                loader: "imports-loader?baseUrl=>"+ JSON.stringify( API[ process.env.NODE_ENV || "development" ] )
            }
        ]
    }
};

這樣咱們在引用 ajax 這個模塊的時候就會觸發這個 laoder 將 baseUrl 這個變量注入到 ajax 模塊中，因此咱們能夠直接在 ajax 模塊中使用 baseUrl 變量便可。當前也不要忘記了和上面同樣設置一下 NODE_ENV 環境變量哦！

其它

固然像 http://stackoverflow.com/ques... 這個問題的回答中直接使用 DefinePlugin 也是能夠的。

參考資料：

• http://stackoverflow.com/ques...
• http://stackoverflow.com/ques...
• https://webpack.github.io/doc...