环境变量

之前,我们在项目里会经常使用 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  # 代码打包  # 打包  # Vue项目webpack打包部署到服务器的实例详解  # webpack启动服务器和处理sourcemap的操作方法  # 详解如何优雅在webpack项目实现mock服务器  # webpack-dev-server搭建本地服务器的实现  # vue-cli+webpack项目打包到服务器后  # ttf字体找不到的解决操作  # Webpack部署本地服务器的方法  # 是有  # 是这样  # 加载  # 永远不会  # 是一个  # 进阶  # 我在  # 目录下  # 多个  # 我现在  # 就好  # 中有  # 其他的  # 这两个  # 这样做  # 或者是  # 一个问题  # 这样子  # 该项目  # 还有一些 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何与Pusher实现实时通信？（WebSocket示例）  Windows11怎样设置电源计划_Windows11电源计划调整攻略【指南】  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  Thinkphp 中 distinct 的用法解析  java获取注册ip实例  如何在阿里云通过域名搭建网站？  Laravel怎么写单元测试_PHPUnit在Laravel项目中的基础测试入门  如何在建站之星网店版论坛获取技术支持？  魔毅自助建站系统：模板定制与SEO优化一键生成指南  使用spring连接及操作mongodb3.0实例  laravel怎么使用数据库工厂（Factory）生成带有关联模型的数据_laravel Factory生成关联数据方法  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  厦门模型网站设计制作公司,厦门航空飞机模型掉色怎么办？  如何快速生成凡客建站的专业级图册？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  Android仿QQ列表左滑删除操作  猎豹浏览器开发者工具怎么打开 猎豹浏览器F12调试工具使用【前端必备】  javascript读取文本节点方法小结  JavaScript如何实现音频处理_Web Audio API如何工作？  如何在新浪SAE免费搭建个人博客？  ,怎么在广州志愿者网站注册？  如何在景安服务器上快速搭建个人网站？  Laravel如何使用Sanctum进行API认证？（SPA实战）  Laravel怎么做数据加密_Laravel内置Crypt门面的加密与解密功能  PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  javascript日期怎么处理_如何格式化输出  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  实例解析angularjs的filter过滤器  企业网站制作这些问题要关注  微信小程序 input输入框控件详解及实例（多种示例）  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  Laravel怎么发送邮件_Laravel Mail类SMTP配置教程  Laravel的Blade指令怎么自定义_创建你自己的Laravel Blade Directives  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  详解CentOS6.5 安装 MySQL5.1.71的方法  Python自动化办公教程_ExcelWordPDF批量处理案例  清除minerd进程的简单方法  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  无锡营销型网站制作公司,无锡网选车牌流程？  如何基于PHP生成高效IDC网络公司建站源码？  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  如何用景安虚拟主机手机版绑定域名建站？  Android自定义控件实现温度旋转按钮效果  Laravel怎么使用Blade模板引擎_Laravel模板继承与Component组件复用【手册】  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程