webpack 巧解环境设置题目

2024年4月8日 232次阅读 来源: 公子

项目的开辟和测试和临盆环境平常都不是同一个，有时刻就会发生须要前端项目须要依据差别的环境举行差别的设置的状况。比较典范的状况就是后端的接口 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 也是能够的。

参考资料：

    原文作者：公子
    原文地址: https://segmentfault.com/a/1190000004053607
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞