webpack 巧解環境配置問題

siberiawolf 發布于2019-08-19 17:07 / 410人閱讀

摘要：項目的開發和測試和生產環境一般都不是同一個，有時候就會產生需要前端項目需要根據不同的環境進行不同的配置的情況。比較經典的情況就是后端的接口的問題。當前也不要忘記了和上面一樣設置一下環境變量哦其它當然像這個問題的回答中直接使用也是可以的。

項目的開發和測試和生產環境一般都不是同一個，有時候就會產生需要前端項目需要根據不同的環境進行不同的配置的情況。比較經典的情況就是后端的接口 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...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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