webpack 巧解环境配置问题

siberiawolf 发布于2019-08-19 17:07 / 304人阅读

摘要：项目的开发和测试和生产环境一般都不是同一个，有时候就会产生需要前端项目需要根据不同的环境进行不同的配置的情况。比较经典的情况就是后端的接口的问题。当前也不要忘记了和上面一样设置一下环境变量哦其它当然像这个问题的回答中直接使用也是可以的。

项目的开发和测试和生产环境一般都不是同一个，有时候就会产生需要前端项目需要根据不同的环境进行不同的配置的情况。比较经典的情况就是后端的接口 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...

https://webpack.github.io/doc...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78215.html

webpack 项目构建：（三）开发环境——本地服务器搭建

摘要：上一章我们了解了的编译环境搭建项目构建二编译环境搭建这一章我们会结合的，介绍本地测试服务器的搭建过程。三开发环境有一些特性是专门用于开发环境的，可以帮助我们搭建一个更好的开发环境。我们可以通过配合使用来搭建本地服务。注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。上一章我们了解了 webpack 的 ES6 编译环境搭建：webpack...

tolerious 2019-08-22 15:10 评论0 收藏0
使用webpack从0搭建多入口网站脚手架，可复用导航栏/底部通栏/侧边栏，根据页面文件自动更改配置

摘要：官方推荐不写重复的配置，即把本地和生产环境共用的配置放到一个文件，然后通过进行合并我们可以看到，通过插件，将共用配置和开发的配置进行合并定义了全局变量这个插件是为了在我们允许后，自动打开页面，避免每次都手动打开。之前只知道webpack很强大，但是一直没有深入学习过，这次从头看了一下教程，然后从0开始搭建了一个多入口网站的开发脚手架，期间遇到过很多问题，所以有心整理一下，希望能给大家...

isLishude 2019-08-02 12:02 评论0 收藏0
使用webpack从0搭建多入口网站脚手架，可复用导航栏/底部通栏/侧边栏，根据页面文件自动更改配置

摘要：官方推荐不写重复的配置，即把本地和生产环境共用的配置放到一个文件，然后通过进行合并我们可以看到，通过插件，将共用配置和开发的配置进行合并定义了全局变量这个插件是为了在我们允许后，自动打开页面，避免每次都手动打开。之前只知道webpack很强大，但是一直没有深入学习过，这次从头看了一下教程，然后从0开始搭建了一个多入口网站的开发脚手架，期间遇到过很多问题，所以有心整理一下，希望能给大家...

jaysun 2019-08-26 13:23 评论0 收藏0
webpack开发与生产环境配置

摘要：豹哥对于刚开始小白的自己虽然现在也白知无不谈，而且回复超快超认真。这里真的很感谢豹哥。是项目启动时的一些文件，如的配置文件开发环境服务配置文件一些简单工具函数等等。是关于整个项目的环境配置包括开发与生产。前言作者去年就开始使用webpack, 最早的接触就来自于vue-cli。那个时候工作重点主要也是 vue 的使用，对webpack的配置是知之甚少，期间有问题也是询问大牛 @吕大...

afishhhhh 2019-08-20 18:32 评论0 收藏0
webpack4 的生产环境优化

摘要：的生产环境优化完整配置的可以参考本文主要介绍了生产环境我都做了哪些优化文章的结构如下静态资源路径。分配不同的关于稳定性的坑注意区分整个项目有变动时，变化。而生产环境可以这一项，因为我们不需要在生产环境调试代码。 webpack4 的生产环境优化 webpack4完整配置的可以参考： https://github.com/ziwei3749/... 本文主要介绍了 webpack4 生产...

bang590 2019-08-23 10:34 评论0 收藏0