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极简入门教程(一):模块机制
Oct 25 NodeJs
nodejs实现遍历文件夹并统计文件大小
May 28 NodeJs
Nodejs学习item【入门手上】
May 05 NodeJs
Nodejs中 npm常用命令详解
Jul 04 NodeJs
nodejs入门教程一:概念与用法简介
Apr 24 NodeJs
NodeJS 实现手机短信验证模块阿里大于功能
Jun 19 NodeJs
nodejs调取微信收货地址的方法
Dec 20 NodeJs
nodejs高大上的部署方式(PM2)
Sep 11 NodeJs
详解nodejs 配置文件处理方案
Jan 02 NodeJs
详解Nodejs get获取远程服务器接口数据
Mar 26 NodeJs
nodejs实现用户登录路由功能
May 22 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 fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
分享php分页的功能模块
2015/06/16 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python3爬虫之设计签名小程序
2018/06/19 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python中round函数保留两位小数的方法
2020/12/04 Python
美国家具网站:Cymax
2016/09/17 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
承认错误的检讨书
2014/01/30 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
家长学校培训材料
2014/08/20 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
民事上诉状范文
2015/05/22 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL