首頁 > web前端 > js教程 > Webpack伺服器端程式碼打包實例詳解

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

小云云
發布: 2018-02-08 11:22:07
原創
1784 人瀏覽過

環境變數

之前,我們在專案裡會經常使用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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板