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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
JavaScript模板入门介绍
2012/09/26 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python读取Excel实例详解
2018/08/17 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
C++程序员求职信
2014/05/07 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
全国优秀教师事迹材料
2014/08/26 职场文书
家长会欢迎词
2015/01/23 职场文书
离婚协议书范本
2015/01/26 职场文书
民事代理词范文
2015/05/25 职场文书
合同审查法律意见书
2015/06/04 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
中学教师教学工作总结
2015/08/13 职场文书
docker-compose部署Yapi的方法
2022/04/08 Servers