溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
環境變量
之前,我們在項目里會經常使用 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 打包的項目中直接這樣做的話, 會產生一個問題. 比如我現在有多個配置:
即便我傳入的當前環境為 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 插件來支持了.
進階使用
比如,src目錄下除了各個模塊的目錄, 還有一些通用方法類,鉤子的目錄, 如: lib 和 hook. 這兩個目錄是可能被其他子模塊共同引用的. 在插件正則中修改:
壓縮代碼, 并添加 source-map 支持
Uglifyjs 或 Uglify-es 其實對于服務器端代碼打包并不友好, 可能會導致打包的失敗, 用 babel-minify-webpack-plugin 插件來替代.
配合 source-map-support 插件來支持源碼的問題定位.
示例項目源碼： https://github.com/AirDwing/webpack-server-bundle
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
