webpack打包nodejs项目的方法


Posted in NodeJs onSeptember 26, 2018

适用情况

首先说明,此情况不具备普遍性。若你的情况与笔者类似那么希望这篇文章能够帮到你。

我的项目情况是这样的:用node.js做后台,ejs做模板引擎(即整个页面是一个ejs文件)由node.js将数据渲染完成后,再将完整页面返回给用户。

那么这样做会遇到的问题:

1. 本项目没有html页面,ejs的作用也不是引入公共的组件,直接就是一个完整的页面,用webpack中处理ejs文件的loader返回的是一个函数,故会产生问题

2.由于node.js配置了静态资源目录public,而视图目录与之同级,webpack在处理图像等静态资源目录的路径的时候会产生问题

3.如果使用publicpath 那么nodejs在运行的时候就会找不到资源,因为设置了静态资源的目录

如果你也遇到了类似的问题,希望你能在本文中找到解决方法。

这里多说一句:不要觉得我的项目很奇怪,因为我当时写的时候,知识储备不足,等到后面发现不妥的时候,为时已晚。

改起来太麻烦,所以将错就错了。。。。。。

解决方案

1.处理ejs

我在各个论坛,官网搜寻良久,始终没能找到,能处理我这种情况的loader。

没有办法之下,只能换一个思路,将ejs文件先转为html

首先要修改文件,那么就要修改服务器的模板引擎(这里是我的app.js)

webpack打包nodejs项目的方法

那么要修改成什么呢?我要让nodejs使用ejs模板引擎,但是使用html文件来渲染

这里我们要用的是express中的app.engine 来注册一个引擎

代码如下:

app.set('views',path.join(__dirname,'views'));//设置模板引擎的目录
app.engine('html', require('ejs').renderFile);
app.set('view engine','html');

这样我们就可以将原本views视图目录中的ejs文件的后缀修改为.html了

2.webpack处理html文件

首先引入我眼帘的是webpack插件:HtmlWebpackPlugin

我找了许多文章,文章中对html文件的处理无一列外都用到了这个插件

既然那么多人用,那么它的强大是毋庸置疑的。

但是配置好后运行webpack,报了一个locals未定义的错误

报错代码:

webpack打包nodejs项目的方法

由于locals是由express中的res.render()传回页面的数据,而在此时webpack处理的时候,理所当然的会报未定义的错误了。

那么这个问题怎么解决呢?

我现在需要让webpack帮我处理html中的资源,又要让webpack不要理会ejs的语法,帮我继续压缩代码,就陷入了一个十分难受的境地。

在搜寻良久无果后,一篇误打误撞的文章启发了我

webpack打包nodejs项目的方法

这篇文章的博主是希望,webpack能够把ejs引入的模板打包到一个页面中,而我恰恰相反,我就是需要webpack不理会我的ejs代码。

于是解决办法氤氲而生。

首先我将原本html中的js代码抽离到test.js中

然后以这个js文件为入口文件,再以原本的html文件为模板

用HtmlWebpackPlugin来生成我所需要的压缩过后的html

解决代码

webpack.config.js

'use strict';
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

//打包ejs

module.exports = {
 entry: {
 test: './test.js',//入口文件 即一般来说app.js
 },
 mode:"production",//生产环境
 output: {
 path: path.resolve(__dirname,'build'),//输出路径
 filename: 'js/[name]/[name].js'//输出后的文件名
 },
 externals: {
 jquery:'window.jQuery'
 },//外部加载的资源 这些都是不需要进行打包的
 module: {
 rules: [//设置处理js文件的loader
  {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
  {test:/\.css$/,use:["style-loader","css-loader"]},
  {
  test: /\.(png|jpg|gif)$/,
  use: [
   {
   loader: 'file-loader',
   options: {
    name: 'images/[name].[ext]'
   }
   }
  ]
  },
  {
  test: /\.(html)$/,
  use: {
   loader: 'html-loader',
   options: {
   attrs: [':data-src']
   }
  }
  }
 ]
 },
 plugins:[
 new HtmlWebpackPlugin({
  name:'test',
  template:'./public/init.html',//模板文件
  filename:'views/test.html',//目标文件
  minify:{
  collapseWhitespace:true,
  collapseInlineTagWhitespace:true,
  conservativeCollapse:true,
  minifyCSS:true,
  minifyJS: true,
  removeComments:true,
  trimCustomFragments:true
  }
 })
 ],
 optimization: {
 minimize: true//是否压缩代码
 }
};

上面的minify参数主要是配置html压缩的

入口文件test.js

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

运行webpack 大功告成

webpack打包nodejs项目的方法

我们来看看打包前后的html

打包前:

webpack打包nodejs项目的方法

打包后

webpack打包nodejs项目的方法

大小对比

webpack打包nodejs项目的方法

启动nodejs服务器

webpack打包nodejs项目的方法

总结

以上所述是小编给大家介绍的webpack打包nodejs项目,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

NodeJs 相关文章推荐
NodeJS 模块开发及发布详解分享
Mar 07 NodeJs
nodejs命令行参数处理模块commander使用实例
Sep 17 NodeJs
iPhone手机上搭建nodejs服务器步骤方法
Jul 06 NodeJs
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
Dec 30 NodeJs
Nodejs回调加超时限制两种实现方法
Jun 09 NodeJs
nodejs 子进程正确的打开方式
Jul 03 NodeJs
nodejs 简单实现动态html的方法
May 12 NodeJs
详解Nodejs mongoose
Jun 10 NodeJs
Nodejs中怎么实现函数的串行执行
Mar 02 NodeJs
nodejs实现日志读取、日志查找及日志刷新的方法分析
May 20 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 NodeJs
nodejs+koa2 实现模仿springMVC框架
Oct 21 NodeJs
Nodejs把接收图片base64格式保存为文件存储到服务器上
Sep 26 #NodeJs
基于Nodejs的Tcp封包和解包的理解
Sep 19 #NodeJs
详解webpack打包nodejs项目(前端代码)
Sep 19 #NodeJs
Nodejs调用Dll模块的方法
Sep 17 #NodeJs
nodejs中express入门和基础知识点学习
Sep 13 #NodeJs
NodeJS 实现多语言的示例代码
Sep 11 #NodeJs
nodejs高大上的部署方式(PM2)
Sep 11 #NodeJs
You might like
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP实现简易计算器功能
2020/08/28 PHP
javascript 三种编解码方式
2010/02/01 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
浅谈Python爬取网页的编码处理
2016/11/04 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python学习基础之循环import及import过程
2018/04/22 Python
python实现多进程代码示例
2018/10/31 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python实现图片中文字分割效果
2019/07/22 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
2014年新生军训方案
2014/05/01 职场文书
高三毕业评语
2014/12/31 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技