详解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开发微博实例
Mar 25 NodeJs
nodejs简单实现中英文翻译
May 04 NodeJs
nodejs 的 session 简单使用
Jun 06 NodeJs
使用nodejs中httpProxy代理时候出现404异常的解决方法
Aug 15 NodeJs
NodeJs模拟登陆正方教务
Apr 28 NodeJs
nodejs批量下载图片的实现方法
May 19 NodeJs
nodejs判断文件、文件夹是否存在及删除的方法
Nov 10 NodeJs
nodejs超出最大的调用栈错误问题
Dec 27 NodeJs
Mac下通过brew安装指定版本的nodejs教程
May 17 NodeJs
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
Mar 02 NodeJs
关于NodeJS中的循环引用详解
Jul 23 NodeJs
Nodejs在局域网配置https访问的实现方法
Oct 17 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表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
python实现数通设备端口监控示例
2014/04/02 Python
收集的几个Python小技巧分享
2014/11/22 Python
python中map、any、all函数用法分析
2015/04/21 Python
Python微信公众号开发平台
2018/01/25 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
python web框架 django wsgi原理解析
2019/08/20 Python
python编写计算器功能
2019/10/25 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
如何执行一个shell程序
2012/11/23 面试题
实习生自荐信范文
2013/11/13 职场文书
对标管理实施方案
2014/03/12 职场文书
普通党员对照检查材料
2014/08/28 职场文书
政协会议宣传标语
2014/10/09 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js