网络包打包节点项目的方法

适应性

首先，这种情况并不普遍。如果你的情况和作者类似，希望这篇文章能对你有所帮助。

我的项目情况如下：node.js作为后台，ejs作为模板引擎(即整个页面是一个ejs文件)。在node.js呈现数据之后，完整的页面被返回给用户。

那么这样做将会遇到的问题是：

1.这个项目没有html页面，ejs的功能不是引入公共组件，而是直接成为一个完整的页面。用于处理webpack中的ejs文件的加载程序返回一个函数，这会导致问题

2.因为node.js配置了static resource directory public，而view目录在同一级别，所以webpack在处理图像等静态资源目录的路径时会出现问题。

3.如果使用publicpath，nodejs在运行时将找不到资源，因为静态资源的目录已设置

如果你遇到过类似的问题，希望你能在这篇文章中找到解决方法。

这里再多说一句：不要觉得我的项目很奇怪，因为我写的时候知识储备不足，后来发现不对劲的时候已经来不及了。

改起来太麻烦了，犯错误就是错误。

解决办法

1.处理EJB

我在各种论坛和官网搜索了很久，都找不到能处理我情况的加载器。

没有办法，我们只能改变思维方式，先把ejs文件变成html

首先要修改文件，然后修改服务器的模板引擎(这里是我的app.js)

那么，应该换成什么呢？我希望nodejs使用ejs模板引擎，但是使用html文件来呈现

在这里，我们将在express中使用app.engine注册一个引擎

代码如下：

app . set(' view '，path.join(__dirname，' view '))；//设置模板引擎目录app.engine ('html '，require ('ejs ')。render file)；app.set('视图引擎'，' html ')；这样，我们可以将原始视图目录中的ejs文件的后缀修改为html

2.webpack处理html文件

首先引起我注意的是webpack插件：HtmlWebpackPlugin

我找到了很多文章，所有的文章都在处理html文件的时候使用了这个插件。

既然这么多人用，它的威力是毋庸置疑的。

但是，在配置之后，运行webpack报告了一个未定义的本地错误

错误代码：

因为locals是由res.render()在express中返回的页面数据，所以当webpack此时处理它时，自然会报告未定义的错误。

那么如何解决这个问题呢？

现在，我需要让webpack帮我处理html中的资源，让webpack忽略ejs的语法，帮我继续压缩代码，所以我的处境非常不舒服。

在找了很久没有结果之后，一篇错误的文章启发了我

本文的博主希望webpack可以将ejs引入的模板打包到一个页面中，但我只需要webpack忽略我的ejs代码。

于是解决方案就产生了。

首先，我将把原始html中的js代码提取到test.js中

然后使用这个js文件作为入口文件，然后使用原始的html文件作为模板

使用HtmlWebpackPlugin生成我需要的压缩html

分辨率代码

webpack.config.js

使用"严格";const path=require(' path ')；const HTMl WebPACKlugin=require(' HTMl-web pack-plugin ')；//打包射精。导出={条目： {测试： } ./test.js '，//入口文件即一般来说app.js }，mode:'production '，//生产环境输出： {路径：路径。解析(_ dirname，' build ')，//输出路径文件名： ' js/[名称]/[名称].js'//输出后的文件名}，外部s : { jquery : '窗口。jquery ' }，//外部加载的资源这些都是不需要进行打包的模块： {规则s 3360 [//设置处理射流研究…文件的加载程序{test:/\ .js$/，use:'babel-loader '，exclude:/node_modules/}，{test:/\ .css$/，use:['style-loader '，' css-loader']}，{ test: /\ .(png|jpg|gif)$/，使用：[{ loader : ' file-loader '，选项： { name : ' images/[name]].[ext]' } } ] }，{ test: /\ .(html)$/，使用： { loader : ' html-loader '，选项： { attrs :[' : data-src ']} } } } } } } } } } })，插件：[新的html webpackplugin({ name : ' test '，template: ' ./public/init.html '，//模板文件文件名： '查看/测试。html '，//目标文件minify : { collapseinlinetagblaspaces : true，collapseinetagwhitespace : rue，conservativeCollapse:true，minifyCSS:true，minifyJS: true，removeComments:true，trimCustomFragments:true } })，优化： {最小化： true//是否压缩代码}};上面的使变小参数主要是配置超文本标记语言压缩的

入口文件test.js

这里面没有任何有关工具的代码，全是项目的业务代码，故在这里就不粘了

运行工具大功告成

我们来看看打包前后的超文本标记语言

打包前：

打包后

大小对比

启动开发服务器

总结

以上所述是小编给大家介绍的工具打包开发项目，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！