webpack打包nodejs项目的方法

时间 2019-11-15

标签 webpack 打包 nodejs 项目方法繁體版

原文原文链接

适用状况css

首先说明，此状况不具有广泛性。若你的状况与笔者相似那么但愿这篇文章可以帮到你。html

个人项目状况是这样的：用node.js作后台，ejs作模板引擎（即整个页面是一个ejs文件）由node.js将数据渲染完成后，再将完整页面返回给用户。前端

那么这样作会遇到的问题：node

前端精品教程：百度网盘下载jquery

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

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

3.若是使用publicpath 那么nodejs在运行的时候就会找不到资源，由于设置了静态资源的目录express

若是你也遇到了相似的问题，但愿你能在本文中找到解决方法。服务器

这里多说一句：不要以为个人项目很奇怪，由于我当时写的时候，知识储备不足，等到后面发现不妥的时候，为时已晚。babel

改起来太麻烦，因此将错就错了。。。。。。

解决方案

1.处理ejs

我在各个论坛，官网搜寻良久，始终没能找到，能处理我这种状况的loader。

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

首先要修改文件，那么就要修改服务器的模板引擎（这里是个人app.js）

那么要修改为什么呢？我要让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未定义的错误

报错代码：

前端精品教程：百度网盘下载

因为locals是由express中的res.render（）传回页面的数据，而在此时webpack处理的时候，理所固然的会报未定义的错误了。

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

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

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

这篇文章的博主是但愿，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 大功告成

咱们来看看打包先后的html

打包前：

打包后

大小对比

启动nodejs服务器

前端精品教程：百度网盘下载