node项目打包如何隐藏html后缀,详解webpack打包nodejs项目(前端代码)
随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而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)
那么要修改成什么呢?我要让nodejs使用ejs模板引擎,但是使用html文件来渲染
这里我们要用的是express中的app.engine来注册一个引擎
代码如下:
这样我们就可以将原本views视图目录中的ejs文件的后缀修改为.html了
2.webpack处理html文件
首先引入我眼帘的是webpack插件:HtmlWebpackPlugin
我找了许多文章,文章中对html文件的处理无一列外都用到了这个插件
既然那么多人用,那么它的强大是毋庸置疑的。
但是配置好后运行webpack,报了一个locals未定义的错误
报错代码:
由于locals是由express中的res.render()传回页面的数据,而在此时webpack处理的时候,理所当然的会报未定义的错误了。
那么这个问题怎么解决呢?
我现在需要让webpack帮我处理html中的资源,又要让webpack不要理会ejs的语法,帮我继续压缩代码,就陷入了一个十分难受的境地。
在搜寻良久无果后,一篇误打误撞的文章启发了我
这篇文章的博主是希望,webpack能够把ejs引入的模板打包到一个页面中,而我恰恰相反,我就是需要webpack不理会我的ejs代码。
于是解决办法氤氲而生。
首先我将原本html中的js代码抽离到test.js中
然后以这个js文件为入口文件,再以原本的html文件为模板
用HtmlWebpackPlugin来生成我所需要的压缩过后的html
webpack.config.js
//打包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大功告成
我们来看看打包前后的html
打包前:
打包后
大小对比
启动nodejs服务器
问题解决睡觉咯~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
总结
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!
node项目打包如何隐藏html后缀,详解webpack打包nodejs项目(前端代码)相关推荐
- web项目html引入css文件路径,详解Webpack和Webpack-simple中如何引入CSS文件_旧店_前端开发者...
博主最近研究 首先说一下如何在webpack中引入 之后在App.vue文件中在style标签项目写入你想要引入的样式: 本例引入的样式是一个名为nam.css的文件,该文件只是让页面变蓝,之后运行即 ...
- vue项目结构php写哪里,vuex项目结构目录与配置使用详解
这次给大家带来vuex项目结构目录与配置使用详解,使用vuex项目结构目录与配置的注意事项有哪些,下面就是实战案例,一起来看一下. 首先先正经的来一段官网的"忠告": vuex需要 ...
- android项目打包apk,Android Studio将程序打包成APK的步骤详解
第一步:先点击Build选择GenerateSigned APK 第二步:如果之前有编译成APK的话,就直接选择Choose existing已经存在的key:如果没有编译成APK那就选择Create ...
- ActiveX控件打包、签名、嵌入详解
ActiveX控件打包.签名.嵌入详解 前言 在我们的一个项目中,使用到了大华网络监控摄像头枪机,网络上下载了其ActiveX插件,但是发现其所提供的类库没有打包处理.这就导致我们每次给用户安装的时候 ...
- pycharm导入python环境是空的_PyCharm导入python项目并配置虚拟环境的教程详解
PyCharm导入python项目并配置虚拟环境的教程详解 进入PyCharm后,点击File→Open,然后在弹窗中选择需要导入项目的文件夹: 打开了python项目后,需要配置该项目对应的pyth ...
- node.js卸载、安装、配置详解
node.js卸载.安装.配置详解 一. node.js卸载 二.下载安装 2.1 下载 2.2 安装 2.2.1 选择msi安装 2.2.2 选择zip安装 三.配置 3.1 环境变量配置 3.2 ...
- 把java文件打包成.jar (jar命令详解)
把java文件打包成.jar (jar命令详解) 先打开命令提示符(win2000或在运行框里执行cmd命令,win98为DOS提示符),输入jar Chelp,然后回车(如果你盘上已经有了jdk1. ...
- 详解使用VueJS开发项目中的兼容问题
详解使用VueJS开发项目中的兼容问题 本篇文章针对在vue项目中 遇到的兼容性问题以及解决方法做了详细的总结. 一,VUE项目一般会使用axios,而axios又是基于promise的,所以,IE任 ...
- jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下 使用vue-cli构建的vue项目,webpack的配置文 ...
最新文章
- Java项目:学生学科竞赛管理管理系统设计和实现(java+springboot+ssm+maven)
- 如何在html页面循环回显数据,从while循环显示数据到html代码
- STM32 KEIL 串口打印printf使用详解
- 为什么我从 npm 到 yarn 再到 npm?
- how to find all element type with type table of content
- tinymce vue 部分工具不显示_tinymce-vue使用问题及解决记录
- Linux上监控tomcat down掉后自动重启tomcat
- linux下tmux
- python版本差异_npm install报错,不知道是系统差异还是node版本差异,跟python有关系?...
- %set rsh=server.CreateObject(adodb.recordset)%
- windows2003中使用命令行添加IP筛选器规则
- Arduino 交通灯实验
- 计算机网路vlan划分练习
- mdf导入mysql navicat_Navicat如何导入sql server的MDF文件和LDF文件
- java图标中设置背景、文本框设置大小、标签中字体的格式
- C3P0Util 的制作 及DButils 中的 QueryRunner 类的使用
- 最近学习太焦虑,如何戒骄戒躁,静下心来
- 【专栏】国内外物联网平台初探(篇三:QQ物联·智能硬件开放平台)
- Windows Support Tools
- linux系统玩ps3模拟器下载地址,【RPCS3模拟器】RPCS3模拟器下载(PS3模拟器) 电脑版-开心电玩...
热门文章
- Uncaught (in promise) Error: Avoided redundant navigation to current location: “/index“. 解决方法
- mpvue 初始化微信小程序
- 数据结构与与算法之希尔排序
- sql server insert 锁表_SQL Server的insert执行的秘密(下) 带外键的insert分析
- C# 字符串string的基本操作
- Django 1.10中文文档-聚合
- ajax json 渲染 html,jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
- java common-lang_common-lang3工具类-使用手册
- java测试步骤_java测试框架的方法
- java中a 和 a_Java中a=a++ 和 a=++a(轉)