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...