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 相关文章推荐
模拟select的代码
Oct 19 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
VUE中使用Vue-resource完成交互
Jul 21 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
vue实现分页加载效果
Dec 24 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
原生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关联数组的10个操作技巧
2013/01/21 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
js判断密码强度的方法
2020/03/18 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中的连接符(+、+=)示例详解
2017/01/13 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
python编写弹球游戏的实现代码
2018/03/12 Python
python定时关机小脚本
2018/06/20 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Python实现汇率转换操作
2020/05/03 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
质检部经理岗位职责
2014/02/19 职场文书
2014年学生工作总结
2014/11/20 职场文书
团委工作总结2015
2015/04/02 职场文书