详解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 相关文章推荐
Nodejs关于gzip/deflate压缩详解
Mar 04 NodeJs
nodejs实现遍历文件夹并统计文件大小
May 28 NodeJs
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
Jul 26 NodeJs
nodejs实现发出蜂鸣声音(系统报警声)的方法
Jan 18 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
nodejs 搭建简易服务器的图文教程(推荐)
Jul 18 NodeJs
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
Sep 19 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
Jan 02 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
NodeJs生成sitemap站点地图的方法示例
Jun 11 NodeJs
nodejs制作小爬虫功能示例
Feb 24 NodeJs
Nodejs实现WebSocket代码实例
May 19 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
新52大事件
2020/03/03 欧美动漫
PHP技术开发技巧分享
2010/03/23 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
原生JS实现天气预报
2020/06/16 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
Python Django框架单元测试之文件上传测试示例
2019/05/17 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python pickle模块实现对象序列化
2019/11/22 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
Python正则表达式如何匹配中文
2020/05/27 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
Python文件操作的面试题
2013/06/22 面试题
我的中国梦演讲稿600字
2014/08/19 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
spring 项目实现限流方法示例
2022/07/15 Java/Android