webpack打包nodejs項目的方法

適用狀況

首先說明，此狀況不具有廣泛性。若你的狀況與筆者相似那麼但願這篇文章可以幫到你。

個人項目狀況是這樣的：用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 來註冊一個引擎

代碼以下：

?

1 2 3

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

'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服務器

前端精品教程：百度網盤下載