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 npm install全局安装和本地安装的区别
Jun 05 NodeJs
NodeJS中Buffer模块详解
Jan 07 NodeJs
NodeJS实现阿里大鱼短信通知发送
Jan 17 NodeJs
Nodejs爬虫进阶教程之异步并发控制
Feb 15 NodeJs
详解Nodejs基于mongoose模块的增删改查的操作
Dec 21 NodeJs
Nodejs中使用captchapng模块生成图片验证码
May 18 NodeJs
nodejs操作mongodb的增删改查功能实例
Nov 09 NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 NodeJs
NodeJs实现简单的爬虫功能案例分析
Dec 05 NodeJs
详解nodejs 开发企业微信第三方应用入门教程
Mar 12 NodeJs
nodejs的安装使用与npm的介绍
Sep 11 NodeJs
浅谈使用nodejs搭建web服务器的过程
Jul 20 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
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
迎接领导欢迎词
2014/01/11 职场文书
环境科学专业求职信
2014/08/04 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
2015年复活节活动总结
2015/02/27 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
logback如何自定义日志存储
2021/08/30 Java/Android