当前位置：首页 > 资讯 > 技术文档

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

时间：2021-02-11 05:40 编辑：来源：阅读：
扫一扫，手机访问

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

[b]环境变量[/b] 之前,我们在项目里会经常使用 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 接口服务项目, 所以这样进行命名, 可以改成任意的, 你开心就好). [b]动态配置打包[/b] 注意我们以前在 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 打包的项目中直接这样做的话, 会产生一个问题. 比如我现在有多个配置: [list] [*]_develpment.js[/*] [*]_test.js[/*] [*]_production.js[/*] [*]_staging.js[/*] [/list] 即便我传入的当前环境为 development, 依然所有的配置文件会被全部打包进来(只是永远不会被执行). 那么这样的话, 就存在敏感信息泄露的风险. 正确的姿势应该是这样的: [b]config/index.js[/b]

// eslint-disable-next-line import/no-dynamic-require
const options = require(`./_${process.env.API_ENV || 'development'}`);

module.exports = options;

[b]模块化打包[/b] 比如, 我在项目中有很多个模块, 处于负载均衡的需求, 或者是对于客户定制模块化产品的需求, 我们需要分模块进行打包, 避免其他模块(永远不会被执行的)被打包进 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 插件来支持了.

[url=https://github.com/AirDwing/webpack-server-bundle]https://github.com/AirDwing/webpack-server-bundle[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：Bootstrap进度条学习使用
下一篇：js图片切换具体实现代码

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部