详解webpack打包nodejs项目(前端代码)


Posted in NodeJs onSeptember 19, 2018

随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而webpack就是用于将前端各种文件打包起来。一个简单的webpack应该包含以下几个概念

  • 入口起点
  • 输出
  • 配置
  • 组件
  • 加载器
  • 插件
  • 模块
  • 模块热替换

适用情况

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

我的项目情况是这样的:用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项目(前端代码)

问题解决 睡觉咯~~

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

NodeJs 相关文章推荐
使用upstart把nodejs应用封装为系统服务实例
Jun 01 NodeJs
nodejs中实现阻塞实例
Mar 24 NodeJs
NodeJs中的VM模块详解
May 06 NodeJs
windows下安装nodejs及框架express
Aug 07 NodeJs
Nodejs Stream 数据流使用手册
Apr 17 NodeJs
图片上传之FileAPI与NodeJs
Jan 24 NodeJs
NodeJS仿WebApi路由示例
Feb 28 NodeJs
NodeJS处理Express中异步错误
Mar 26 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
详解redis在nodejs中的应用
May 02 NodeJs
基于nodejs的雪碧图制作工具的示例代码
Nov 05 NodeJs
nodejs dgram模块广播+组播的实现示例
Nov 04 NodeJs
Nodejs调用Dll模块的方法
Sep 17 #NodeJs
nodejs中express入门和基础知识点学习
Sep 13 #NodeJs
NodeJS 实现多语言的示例代码
Sep 11 #NodeJs
nodejs高大上的部署方式(PM2)
Sep 11 #NodeJs
Nodejs使用Mongodb存储与提供后端CRD服务详解
Sep 04 #NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
Aug 30 #NodeJs
NodeJS如何实现同步的方法示例
Aug 24 #NodeJs
You might like
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
Seajs源码详解分析
2019/04/02 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
wxPython 入门教程
2008/10/07 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
用Python编写简单的定时器的方法
2015/05/02 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
python实现超级马里奥
2020/03/18 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
《记承天寺夜游》教学反思
2014/02/16 职场文书
出纳岗位职责范本
2015/03/31 职场文书
2015年度保密工作总结
2015/04/24 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python