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

　　

<强>环境变量
　　

　　

之前,我们在项目里会经常使用process.env。NODE_ENV,但这个变量对于webpack打包是有影响的,在生产的时候是有优化的。

　　

所以,我们将改用其他的环境变量来区别:

　　 　　 　　新webpack.DefinePlugin ({ 　　“process.env。NODE_ENV‘:’“生产”, 　　“process.env。$ {process.env API_ENV‘:’”。API_ENV | |”发展“}”” 　　}) 　　 　　

像这样,NODE_ENV始终为生产。

　　

而我们实际开发/产品环境,用process.env。API_ENV变量来使用(由于该项目是一个高雅接口服务项目,所以这样进行命名,可以改成任意的,你开心就好)。

　　

<强>动态配置打包
　　

　　

注意
　　

　　

我们以前在节点。js后端项目中,动态配置加载一般是这样写:

　　 　　 　　const ENV=process.env。NODE_ENV | |“发展”;//eslint-disable-next-line进口/no-dynamic-require 　　const选项=要求(’。/_ $ {ENV} '); 　　 　　模块。出口=选项; 　　之前 　　 　　

为了提高阅读性,和可能存在ENV的复用,我们会单独定义一个变量。

　　

在webpack打包的项目中直接这样做的话,会产生一个问题。比如我现在有多个配置:

　　
    　　<李> _develpment.js李 　　<李> _test.js李 　　<李> _production.js李 　　<李> _staging.js李 　　
　　

即便我传入的当前环境为发展,依然所有的配置文件会被全部打包进来(只是永远不会被执行)。那么这样的话,就存在敏感信息泄露的风险。

　　

正确的姿势应该是这样的:

　　

<强>配置/索引。js
　　

　　 　　//eslint-disable-next-line进口/no-dynamic-require 　　const选项=要求(’。/_ $ {process.env。API_ENV | |”发展“}”); 　　 　　模块。出口=选项; 　　之前 　　 　　

<强>模块化打包
　　

　　

比如,我在项目中有很多个模块,处于负载均衡的需求,或者是对于客户定制模块化产品的需求,我们需要分模块进行打包,避免其他模块(永远不会被执行的)被打包进webpack包。

　　 　　//配置/_development.js 　　出口。enabledModules=(“用户”、“演示”);//可能src目录下还有其他模块目录,如“管理”等 　　 　　

在服务端加载的时候,是这样子的:

　　 　　//src/server.js//动态加载启用的模块 　　enabledModules.forEach ((mod)=比;{/* eslint-disable global-require,进口/no-dynamic-require */const路线=要求(“。/$ {mod}/路线”); 　　routes.middleware() |比;app.use; 　　}); 　　 　　

那么就需要ContextReplacementPlugin插件来支持了。

　　

代码如下:
　　新的webpack。ContextReplacementPlugin (/src/,新的正则表达式(' ^。/($ {enabledModules.join (“|”)})/. * $ '))
　　
　　

　　

<强>进阶使用
　　

　　

比如,src目录下除了各个模块的目录,还有一些通用方法类,钩子的目录,如:自由和钩。这两个目录是可能被其他子模块共同引用的。在插件正则中修改:

　　

代码如下:
　　新的webpack。ContextReplacementPlugin (/src/,新的正则表达式(' ^。/(自由钩| | $ {enabledModules.join (“|”)})/. * $ '))
　　
　　

　　

<强>压缩代码,并添加源映射支持
　　

　　

Uglifyjs或Uglify-es其实对于服务器端代码打包并不友好,可能会导致打包的失败,用babel-minify-webpack-plugin插件来替代。

　　

配合source-map-support插件来支持源码的问题定位。

　　

示例项目源码:https://github.com/AirDwing/webpack-server-bundle
　　

　　

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

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