webpack 巧解環境配置問題

2021-09-19 11:08:55 字數 1501 閱讀 8994

專案的開發和測試和生產環境一般都不是同乙個,有時候就會產生需要前端專案需要根據不同的環境進行不同的配置的情況。比較經典的情況就是後端的介面 hostname 的問題。在開發環境的時候可能使用的是dev.api.xx.com,測試環境需要使用test.api.xx.com,而線上環境需要使用api.xx.com。那麼如何根據環境來動態的在檔案中變更這個值而不用我們手動的在伺服器上修改**呢?我們可以利用 webpack module shim 的一些方法。

就拿上文中的例子,我們如何在不同環境編譯的時候使用不同的 api 位址。webpack shim module 一共有好幾種方法,我們來看下都可以怎麼解決。

provideplugin 可以讓變數直接在模組裡載入而不需要使用require等方法。所以我們可以預先定義一些模組根據不同的環境裝載不同的模組:

module.exports = ;

module.exports = ;

module.exports = ;

var webpack = require("webpack");

module.exports = ,

plugins: [

new webpack.provideplugin()

]};

然後我們在環境變數中定義node_env變數幫助 node 識別環境,例如:

//windows

set node_env=test

//linux or osx

export node_env=test

這樣在 webpack 編譯的時候就能判別出是 test 環境使用 test 的環境變數了,我們直接在**中使用env.baseurl即可。

如果覺得使用provideplugin略微麻煩的話我們也可以使用 imports-loader 來實現我們需要的功能。imports-loader 的作用是將變數注入到模組中,首先我們需要npm install imports-loader安裝這個 loader。在webpack.config.js中我們進行如下操作:

var api = ;

module.exports = ,

module: ]}

};

這樣我們在引用ajax這個模組的時候就會觸發這個 laoder 將baseurl這個變數注入到ajax模組中,所以我們可以直接在ajax模組中使用baseurl變數即可。當前也不要忘記了和上面一樣設定一下node_env環境變數哦!

當然像 這個問題的回答中直接使用defineplugin也是可以的。

webpack開發環境配置

node.js webpack npm install webpack webpack cli g 全域性安裝 npm install webpack webpack cli d 本地 當前目錄 安裝 各種loader 根據需要安裝loader npm i css loader style load...

ruby cucumber環境配置問題及解決方法

一 安裝ruby 安裝完之後在命令視窗執行ruby v 提示ruby 不是內部命令或外部命令,也不是可執行的程式或批處理檔案 原因 安裝的時候提示說自動新增path 什麼的,那 兩個選項都應該打鉤 二 安裝devkit 的安裝目錄 在命令列下轉到devkit 的目錄 執行 ruby dk.rb in...

Webpack配置問題

webpack安裝好後在終端執行程式時,出現了上面的錯誤提示,看著這一堆醒目的紅色,頭一下就大了 當時為什麼要選擇前端呢 淦 便趕緊去尋找度娘的幫助,嘗試了好多人的答案後,最終發現在命令列使用webpack src main.js output filename dist bundle.js out...