webpack打包nodejs項目（前端代碼）

PS.若本文沒有幫到你可以看看我的進階版點此前往

適用情況

首先說明，此情況不具備普遍性。若你的情況與筆者類似那么希望這篇文章能夠幫到你。

我的項目情況是這樣的：用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 來注冊一個引擎

代碼如下：

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

 

 問題解決 睡覺咯~~