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 相关文章推荐
PHPStorm 2020.1 调试 Nodejs的多种方法详解
Sep 17 NodeJs
Ubuntu中搭建Nodejs开发环境过程分享
Jun 01 NodeJs
NodeJS制作爬虫全过程
Dec 22 NodeJs
nodejs事件的监听与触发的理解分析
Feb 12 NodeJs
详解Nodejs基于mongoose模块的增删改查的操作
Dec 21 NodeJs
NodeJS仿WebApi路由示例
Feb 28 NodeJs
nodejs个人博客开发第四步 数据模型
Apr 12 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
详解Nodejs之npm&package.json
Jun 15 NodeJs
Nodejs 和 Electron ubuntu下快速安装过程
May 04 NodeJs
nodejs使用Sequelize框架操作数据库的实现
Oct 21 NodeJs
Nodejs实现微信分账的示例代码
Jan 19 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图片处理之图片背景、画布操作
2014/11/19 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
js使用心得分享
2015/01/13 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
函授大专自我鉴定
2013/11/01 职场文书
日语专业推荐信
2013/11/12 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
法人授权委托书范本
2014/04/04 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
大学生党员批评与自我批评
2014/09/28 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
python基于机器学习预测股票交易信号
2021/05/25 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
mysql事务对效率的影响分析总结
2021/10/24 MySQL