成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack 巧解環(huán)境配置問題

siberiawolf / 431人閱讀

摘要：項(xiàng)目的開發(fā)和測試和生產(chǎn)環(huán)境一般都不是同一個，有時候就會產(chǎn)生需要前端項(xiàng)目需要根據(jù)不同的環(huán)境進(jìn)行不同的配置的情況。比較經(jīng)典的情況就是后端的接口的問題。當(dāng)前也不要忘記了和上面一樣設(shè)置一下環(huán)境變量哦其它當(dāng)然像這個問題的回答中直接使用也是可以的。

項(xiàng)目的開發(fā)和測試和生產(chǎn)環(huán)境一般都不是同一個，有時候就會產(chǎn)生需要前端項(xiàng)目需要根據(jù)不同的環(huán)境進(jìn)行不同的配置的情況。比較經(jīng)典的情況就是后端的接口 hostname 的問題。在開發(fā)環(huán)境的時候可能使用的是 dev.api.xx.com，測試環(huán)境需要使用 test.api.xx.com，而線上環(huán)境需要使用 api.xx.com。那么如何根據(jù)環(huán)境來動態(tài)的在文件中變更這個值而不用我們手動的在服務(wù)器上修改代碼呢？我們可以利用 webpack module shim 的一些方法。

就拿上文中的例子，我們?nèi)绾卧诓煌h(huán)境編譯的時候使用不同的 API 地址。webpack shim module 一共有好幾種方法，我們來看下都可以怎么解決。

ProvidePlugin

ProvidePlugin 可以讓變量直接在模塊里加載而不需要使用 require 等方法。所以我們可以預(yù)先定義一些模塊根據(jù)不同的環(huán)境裝載不同的模塊：

//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")
        })
    ]
};

然后我們在環(huán)境變量中定義 NODE_ENV 變量幫助 node 識別環(huán)境，例如：

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

這樣在 webpack 編譯的時候就能判別出是 test 環(huán)境使用 test 的環(huán)境變量了，我們直接在代碼中使用 ENV.baseUrl 即可。

imports-loader

如果覺得使用 ProvidePlugin 略微麻煩的話我們也可以使用 imports-loader 來實(shí)現(xiàn)我們需要的功能。imports-loader 的作用是將變量注入到模塊中，首先我們需要 npm install imports-loader 安裝這個 loader。在 webpack.config.js 中我們進(jìn)行如下操作：

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 這個模塊的時候就會觸發(fā)這個 laoder 將 baseUrl 這個變量注入到 ajax 模塊中，所以我們可以直接在 ajax 模塊中使用 baseUrl 變量即可。當(dāng)前也不要忘記了和上面一樣設(shè)置一下 NODE_ENV 環(huán)境變量哦！

其它

當(dāng)然像 http://stackoverflow.com/ques... 這個問題的回答中直接使用 DefinePlugin 也是可以的。

參考資料：

http://stackoverflow.com/ques...

http://stackoverflow.com/ques...

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78215.html

相關(guān)文章

  • webpack 項(xiàng)目構(gòu)建：（三）開發(fā)環(huán)境——本地服務(wù)器搭建

    摘要：上一章我們了解了的編譯環(huán)境搭建項(xiàng)目構(gòu)建二編譯環(huán)境搭建這一章我們會結(jié)合的，介紹本地測試服務(wù)器的搭建過程。三開發(fā)環(huán)境有一些特性是專門用于開發(fā)環(huán)境的，可以幫助我們搭建一個更好的開發(fā)環(huán)境。我們可以通過配合使用來搭建本地服務(wù)。 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過程可能會有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環(huán)境搭建：webpack...

    tolerious 評論0 收藏0

  • 使用webpack從0搭建多入口網(wǎng)站腳手架，可復(fù)用導(dǎo)航欄/底部通欄/側(cè)邊欄，根據(jù)頁面文件自動更改配置

    摘要：官方推薦不寫重復(fù)的配置，即把本地和生產(chǎn)環(huán)境共用的配置放到一個文件，然后通過進(jìn)行合并我們可以看到，通過插件，將共用配置和開發(fā)的配置進(jìn)行合并定義了全局變量這個插件是為了在我們允許后，自動打開頁面，避免每次都手動打開。 之前只知道webpack很強(qiáng)大，但是一直沒有深入學(xué)習(xí)過，這次從頭看了一下教程，然后從0開始搭建了一個多入口網(wǎng)站的開發(fā)腳手架，期間遇到過很多問題，所以有心整理一下，希望能給大家...

    isLishude 評論0 收藏0

  • 使用webpack從0搭建多入口網(wǎng)站腳手架，可復(fù)用導(dǎo)航欄/底部通欄/側(cè)邊欄，根據(jù)頁面文件自動更改配置

    摘要：官方推薦不寫重復(fù)的配置，即把本地和生產(chǎn)環(huán)境共用的配置放到一個文件，然后通過進(jìn)行合并我們可以看到，通過插件，將共用配置和開發(fā)的配置進(jìn)行合并定義了全局變量這個插件是為了在我們允許后，自動打開頁面，避免每次都手動打開。 之前只知道webpack很強(qiáng)大，但是一直沒有深入學(xué)習(xí)過，這次從頭看了一下教程，然后從0開始搭建了一個多入口網(wǎng)站的開發(fā)腳手架，期間遇到過很多問題，所以有心整理一下，希望能給大家...

    jaysun 評論0 收藏0

  • webpack開發(fā)與生產(chǎn)環(huán)境配置

    摘要：豹哥對于剛開始小白的自己雖然現(xiàn)在也白知無不談，而且回復(fù)超快超認(rèn)真。這里真的很感謝豹哥。是項(xiàng)目啟動時的一些文件，如的配置文件開發(fā)環(huán)境服務(wù)配置文件一些簡單工具函數(shù)等等。是關(guān)于整個項(xiàng)目的環(huán)境配置包括開發(fā)與生產(chǎn)。 前言 作者去年就開始使用webpack, 最早的接觸就來自于vue-cli。那個時候工作重點(diǎn)主要也是 vue 的使用，對webpack的配置是知之甚少，期間有問題也是詢問大牛 @呂大...

    afishhhhh 評論0 收藏0

  • webpack4 的生產(chǎn)環(huán)境優(yōu)化

    摘要：的生產(chǎn)環(huán)境優(yōu)化完整配置的可以參考本文主要介紹了生產(chǎn)環(huán)境我都做了哪些優(yōu)化文章的結(jié)構(gòu)如下靜態(tài)資源路徑。分配不同的關(guān)于穩(wěn)定性的坑注意區(qū)分整個項(xiàng)目有變動時，變化。而生產(chǎn)環(huán)境可以這一項(xiàng)，因?yàn)槲覀儾恍枰谏a(chǎn)環(huán)境調(diào)試代碼。 webpack4 的生產(chǎn)環(huán)境優(yōu)化 webpack4完整配置的可以參考： https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產(chǎn)...

    bang590 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<