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

　　

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

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

　　

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

　　

我的项目情况是这样的:用node . js做后台,ejs做模板引擎(即整个页面是一个ejs文件)由node . js将数据渲染完成后,再将完整页面返回给用户。

　　

<强>那么这样做会遇到的问题:

　　

1只本项目没有html页面,ejs的作用也不是引入公共的组件,直接就是一个完整的页面,用webpack中处理ejs文件的装载机返回的是一个函数,故会产生问题

　　

2。由于node . js配置了静态资源目录,而视图目录与之同级,webpack在处理图像等静态资源目录的路径的时候会产生问题

　　

3。如果使用publicpath 那么nodejs在运行的时候就会找不到资源,因为设置了静态资源的目录

　　

如果你也遇到了类似的问题,希望你能在本文中找到解决方法。

　　

这里多说一句:不要觉得我的项目很奇怪,因为我当时写的时候,知识储备不足,等到后面发现不妥的时候,为时已晚。

　　

改起来太麻烦,所以将错就错了…

　　

　　

<强> 1。处理ejs

　　

我在各个论坛,官网搜寻良久,始终没能找的到,能处理我这种情况的加载程序。

　　

没有办法之下,只能换一个思路,将ejs文件先转为html

　　

首先要修改文件,那么就要修改服务器的模板引擎(这里是我的app.js)

　　

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

　　

那么要修改成什么呢?我要让nodejs使用ejs模板引擎,但是使用html文件来渲染

　　

这里我们要用的是表达中的app.engine 来注册一个引擎

　　

代码如下:

　　 　　 　　app.set(“视图”,path.join (__dirname,“意见”));//设置模板引擎的目录 　　app.engine (“html”,要求(“ejs”) .renderFile); 　　app.set(“视图引擎”、“html”); 　　 　　

这样我们就可以将原本观点视图目录中的ejs文件的后缀修改为html了

　　

<强> 2. webpack处理html文件

　　

首先引入我眼帘的是webpack插件:HtmlWebpackPlugin

　　

我找了许多文章,文章中对html文件的处理无一列外都用到了这个插件

　　

既然那么多人用,那么它的强大是毋庸置疑的。

　　

但是配置好后运行webpack,报了一个当地人未定义的错误

　　

报错代码:

　　

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

　　

由于当地人是由中表达的res.render()传回页面的数据,而在此时webpack处理的时候,理所当然的会报未定义的错误了。

　　

那么这个问题怎么解决呢?

　　

我现在需要让webpack帮我处理html中的资源,又要让webpack不要理会ejs的语法,帮我继续压缩代码,就陷入了一个十分难受的境地。

　　

在搜寻良久无果后,一篇误打误撞的文章启发了我

　　

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

　　

这篇文章的博主是希望,webpack能够把ejs引入的模板打包到一个页面中,而我恰恰相反,我就是需要webpack不理会我的ejs代码。

　　

于是解决办法氤氲而生。

　　

首先我将原本html中的js代码抽离到. js中

　　

然后以这个js文件为入口文件,再以原本的html文件为模板

　　

用HtmlWebpackPlugin来生成我所需要的压缩过后的html

　　

<>强解决代码

　　

webpack.config.js 　　 　　 　　使用严格的; 　　const path=要求(“路径”); 　　const HtmlWebpackPlugin=要求(“html-webpack-plugin”);//打包ejs 　　 　　模块。出口={ 　　条目:{ 　　测试:“。/测试。js ',//入口文件即一般来说app.js 　　}, 　　模式:“生产”,//生产环境 　　输出:{ 　　路径:path.resolve (__dirname“构建”),//输出路径 　　文件名:“js/[名字]/[名字]. js”//输出后的文件名 　　}, 　　外部:{ 　　jquery:“window.jQuery” 　　},//外部加载的资源这些都是不需要进行打包的 　　模块:{ 　　规则:[//设置处理js文件的加载程序 　　{测试:/\ . js/美元,使用:“babel-loader”,排除:/node_modules/}, 　　{测试:/\ . css/美元,使用:[“style-loader”、“css-loader”]}, 　　{ 　　测试:/\。(png | jpg | gif)/美元, 　　用途:[ 　　{ 　　装载机:“file-loader”, 　　选择:{ 　　名称:“图像/[名字][ext]。” 　　} 　　} 　　] 　　}, 　　{ 　　测试:/\。(html)/美元, 　　用途:{ 　　装载机:“html-loader”, 　　选择:{ 　　attrs: [': data-src] 　　} 　　} 　　} 　　] 　　}, 　　插件:[ 　　新HtmlWebpackPlugin ({ 　　名称:“测试”, 　　模板:“。/公共/init.html ',//模板文件 　　文件名:“视图/test.html ',//目标文件 　　使变小:{ 　　collapseWhitespace:没错, 　　collapseInlineTagWhitespace:没错, 　　conservativeCollapse:没错, 　　minifyCSS:没错, 　　minifyJS:没错, 　　removeComments:没错, 　　trimCustomFragments:真 　　} 　　}) 　　), 　　优化:{ 　　最小化:真//是否压缩代码 　　} 　　

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