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 相关文章推荐
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
BootStrap中的表单大全
Sep 07 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
vue3中provide && inject的使用
Jul 01 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上传图片存入数据库示例分享
2014/03/11 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
浅谈php命令行用法
2015/02/04 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
newxtree.js代码
2007/03/13 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Python字符遍历的艺术
2008/09/06 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
我有一个梦想演讲稿
2014/05/05 职场文书
师范生求职自荐信
2014/06/14 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
2014年法院工作总结
2014/11/24 职场文书
复活读书笔记
2015/06/29 职场文书
行政处罚告知书
2015/07/01 职场文书
新郎婚礼致辞
2015/07/27 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
基于python的matplotlib制作双Y轴图
2021/04/20 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL