Webpack伺服器端程式碼打包實例詳解

環境變數

之前,我們在專案裡會經常使用process.env.NODE_ENV, 但這個變數對於webpack打包是有影響的, 在production 的時候是有優化的.本文主要跟大家介紹Webpack 伺服器端程式碼打包的範例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

我們將改用其他的環境變數來區別:

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

像這樣, NODE_ENV 總是為production.

而我們實際開發/產品環境, 用process.env.API_ENV 變數來使用(由於該專案是一個koa 介面服務專案, 所以這樣進行命名, 可以改成任意的, 你開心就好).

#動態設定打包

注意

我們以前在node.js 後端專案中, 動態設定載入一般是這樣寫:

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

module.exports = options;

為了提高閱讀性, 和可能存在ENV的複用, 我們會單獨定義一個變數.

在webpack 打包的項目中直接這樣做的話, 會產生一個問題. 例如我現在有多個設定:

• _develpment.js

• _test.js

• ##_production.js

• _staging.js

即使我傳入的目前環境為development, 依然所有的設定檔會被全部打包進來(只是永遠不會被執行). 那麼這樣的話, 就存在敏感信息洩露的風險.

正確的姿勢應該是這樣的:

config/index .js

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

module.exports = options;

模組化打包

例如, 我在專案中有很多個模組, 處於負載平衡的需求, 或是對於客戶定制模組化產品的需求, 我們需要分模組進行打包, 避免其他模組(永遠不會被執行的)被打包進webpack bundle.

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

在服務端載入的時候, 是這樣子的:

// src/server.js
// 动态加载启用的模块
enabledModules.forEach((mod) => {
 /* eslint-disable global-require,import/no-dynamic-require */
 const routes = require(`./${mod}/route`);
 routes.middleware() |> app.use;
});

那麼就需要ContextReplacementPlugin 外掛程式來支援了.

程式碼如下:

new webpack.ContextReplacementPlugin(/src/, new RegExp(`^./(${enabledModules.join('|')})/.*$`))

進階使用

#例如,src目錄下除了各個模組的目錄, 還有一些通用方法類別,鉤子的目錄, 如: lib 和hook. 這兩個目錄是可能被其他子模組共同引用的. 在外掛正規修改:

程式碼如下:

new webpack.ContextReplacementPlugin(/src/, new RegExp(`^./(lib|hook|${enabledModules.join('|')})/.*$`))

壓縮程式碼, 並加入source-map 支援

Uglifyjs 或Uglify-es 其實對於伺服器端程式碼打包不友善, 可能會導致打包的失敗, 用babel- minify-webpack-plugin 外掛程式來取代.

##配合source-map-support 外掛程式來支援原始碼的問題定位.

範例專案原始碼： https://github.com/AirDwing/webpack -server-bundle

相關推薦：

PHP簡單系統查詢模組程式碼打包下載_PHP教學

#

以上是Webpack伺服器端程式碼打包實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！