Webpack 服务器端代码打包的示例代码


Posted in Javascript onSeptember 19, 2017

环境变量

之前,我们在项目里会经常使用 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
原生js中ajax访问的实例详解
Sep 19 #Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 #Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 #Javascript
前端常见跨域解决方案(全)
Sep 19 #Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 #Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 #Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 #Javascript
You might like
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
php中的常用魔术方法总结
2013/08/02 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
Python验证码识别处理实例
2015/12/28 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python安装requests库的实例代码
2019/06/25 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
Python实现弹球小游戏
2020/08/01 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
医学毕业生自荐信
2013/10/11 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
数控机床专业自荐信
2014/05/19 职场文书
抗震救灾标语
2014/06/26 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书