本篇文章主要介紹了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中文網其他相關文章！
