Webpack伺服器端程式碼打包

本篇文章主要介紹了Webpack 伺服器端程式碼打包的範例程式碼，小編覺得蠻不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

環境變數

#之前,我們在專案裡會經常使用process.env.NODE_ENV, 但這個變數對於webpack打包是有影響的, 在production 的時候是有優化的.

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本家。

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