no-image

Webpack 伺服器端程式碼打包

                                    

環境變數

之前,我們在專案裡會經常使用 process.env.NODE_ENV

像這樣, NODE_ENV

為了提高閱讀性, 和可能存在ENV

模組化打包

比如, 我在專案中有很多個模組, 處於負載均衡的需求, 或者是對於客戶定製模組化產品的需求, 我們需要分模組進行打包, 避免其他模組(永遠不會被執行的)被打包進 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

進階使用

比如,src

壓縮程式碼, 並新增 source-map 支援

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

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


示例專案原始碼: https://github.com/AirDwing/w…

原文連結: https://leader.js.cool/#/expe…

關聯文章