環(huán)境變量

目前累計服務(wù)客戶數(shù)千家，積累了豐富的產(chǎn)品開發(fā)及服務(wù)經(jīng)驗。以網(wǎng)站設(shè)計水平和技術(shù)實力，樹立企業(yè)形象，為客戶提供網(wǎng)站設(shè)計、網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計、網(wǎng)絡(luò)營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補等服務(wù)。創(chuàng)新互聯(lián)公司始終以務(wù)實、誠信為根本，不斷創(chuàng)新和提高建站品質(zhì)，通過對領(lǐng)先技術(shù)的掌握、對創(chuàng)意設(shè)計的研究、對客戶形象的視覺傳遞、對應(yīng)用系統(tǒng)的結(jié)合，為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案，攜手廣大客戶，共同發(fā)展進步。

之前,我們在項目里會經(jīng)常使用 process.env.NODE_ENV, 但這個變量對于 webpack打包是有影響的, 在 production 的時候是有優(yōu)化的.

所以, 我們將改用其他的環(huán)境變量來區(qū)別:

new webpack.DefinePlugin({
 'process.env.NODE_ENV': '"production"',
 'process.env.API_ENV': `"${process.env.API_ENV || 'development'}"`
})

像這樣, NODE_ENV 始終為 production.

而我們實際開發(fā)/產(chǎn)品環(huán)境, 用 process.env.API_ENV 變量來使用(由于該項目是一個 koa 接口服務(wù)項目, 所以這樣進行命名, 可以改成任意的, 你開心就好).

動態(tài)配置打包

注意

我們以前在 node.js 后端項目中, 動態(tài)配置加載一般是這樣寫:

const ENV = process.env.NODE_ENV || 'development';
// eslint-disable-next-line import/no-dynamic-require
const options = require(`./_${ENV}`);

module.exports = options;

為了提高閱讀性, 和可能存在ENV的復(fù)用, 我們會單獨定義一個變量.

在 webpack 打包的項目中直接這樣做的話, 會產(chǎn)生一個問題. 比如我現(xiàn)在有多個配置:

• _develpment.js
• _test.js
• _production.js
• _staging.js

即便我傳入的當(dāng)前環(huán)境為 development, 依然所有的配置文件會被全部打包進來(只是永遠不會被執(zhí)行). 那么這樣的話, 就存在敏感信息泄露的風(fēng)險.

正確的姿勢應(yīng)該是這樣的:

config/index.js

// eslint-disable-next-line import/no-dynamic-require
const options = require(`./_${process.env.API_ENV || 'development'}`);

module.exports = options;

模塊化打包

比如, 我在項目中有很多個模塊, 處于負載均衡的需求, 或者是對于客戶定制模塊化產(chǎn)品的需求, 我們需要分模塊進行打包, 避免其他模塊(永遠不會被執(zhí)行的)被打包進 webpack bundle.

// config/_development.js
exports.enabledModules = ['user', 'demo']; 
// 可能 src 目錄下 還有其他模塊目錄, 如 'manage' 等

在服務(wù)端加載的時候, 是這樣子的:

// src/server.js
// 動態(tài)加載啟用的模塊
enabledModules.forEach((mod) => {
 /* eslint-disable global-require,import/no-dynamic-require */
 const routes = require(`./${mod}/route`);
 routes.middleware() |> app.use;
});

那么就需要 ContextReplacementPlugin 插件來支持了.

進階使用

比如,src目錄下除了各個模塊的目錄, 還有一些通用方法類,鉤子的目錄, 如: lib 和 hook. 這兩個目錄是可能被其他子模塊共同引用的. 在插件正則中修改:

壓縮代碼, 并添加 source-map 支持

Uglifyjs 或 Uglify-es 其實對于服務(wù)器端代碼打包并不友好, 可能會導(dǎo)致打包的失敗, 用 babel-minify-webpack-plugin 插件來替代.

配合 source-map-support 插件來支持源碼的問題定位.

示例項目源碼： https://github.com/AirDwing/webpack-server-bundle

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前題目：Webpack服務(wù)器端代碼打包的示例代碼
當(dāng)前鏈接：http://chinadenli.net/article2/gjeeoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、微信公眾號、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站維護、ChatGPT、虛擬主機

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)