使用webpack怎么對nodejs項(xiàng)目進(jìn)行打包

使用webpack怎么對nodejs項(xiàng)目進(jìn)行打包？很多新手對此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)主營漳浦網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App制作,漳浦h5小程序設(shè)計(jì)搭建,漳浦網(wǎng)站營銷推廣歡迎漳浦等地區(qū)企業(yè)咨詢

遇到的問題：

1. 本項(xiàng)目沒有html頁面，ejs的作用也不是引入公共的組件，直接就是一個(gè)完整的頁面，用webpack中處理ejs文件的loader返回的是一個(gè)函數(shù)，故會產(chǎn)生問題

2.由于node.js配置了靜態(tài)資源目錄public，而視圖目錄與之同級，webpack在處理圖像等靜態(tài)資源目錄的路徑的時(shí)候會產(chǎn)生問題

3.如果使用publicpath 那么nodejs在運(yùn)行的時(shí)候就會找不到資源，因?yàn)樵O(shè)置了靜態(tài)資源的目錄

解決方案

1.處理ejs

我在各個(gè)論壇，官網(wǎng)搜尋良久，始終沒能找到，能處理我這種情況的loader。

沒有辦法之下，只能換一個(gè)思路，將ejs文件先轉(zhuǎn)為html

首先要修改文件，那么就要修改服務(wù)器的模板引擎（這里是我的app.js）

那么要修改成什么呢？我要讓nodejs使用ejs模板引擎，但是使用html文件來渲染

這里我們要用的是express中的app.engine 來注冊一個(gè)引擎

代碼如下：

app.set('views',path.join(__dirname,'views'));//設(shè)置模板引擎的目錄
app.engine('html', require('ejs').renderFile);
app.set('view engine','html');

這樣我們就可以將原本views視圖目錄中的ejs文件的后綴修改為.html了

2.webpack處理html文件

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

我找了許多文章，文章中對html文件的處理無一列外都用到了這個(gè)插件

既然那么多人用，那么它的強(qiáng)大是毋庸置疑的。

但是配置好后運(yùn)行webpack，報(bào)了一個(gè)locals未定義的錯(cuò)誤

報(bào)錯(cuò)代碼：

由于locals是由express中的res.render（）傳回頁面的數(shù)據(jù)，而在此時(shí)webpack處理的時(shí)候，理所當(dāng)然的會報(bào)未定義的錯(cuò)誤了。

那么這個(gè)問題怎么解決呢？

我現(xiàn)在需要讓webpack幫我處理html中的資源，又要讓webpack不要理會ejs的語法，幫我繼續(xù)壓縮代碼，就陷入了一個(gè)十分難受的境地。

在搜尋良久無果后，一篇誤打誤撞的文章啟發(fā)了我

這篇文章的博主是希望，webpack能夠把ejs引入的模板打包到一個(gè)頁面中，而我恰恰相反，我就是需要webpack不理會我的ejs代碼。

于是解決辦法氤氳而生。

首先我將原本html中的js代碼抽離到test.js中

然后以這個(gè)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",//生產(chǎn)環(huán)境
 output: {
 path: path.resolve(__dirname,'build'),//輸出路徑
 filename: 'js/[name]/[name].js'//輸出后的文件名
 },
 externals: {
 jquery:'window.jQuery'
 },//外部加載的資源 這些都是不需要進(jìn)行打包的
 module: {
 rules: [//設(shè)置處理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',//目標(biāo)文件
  minify:{
  collapseWhitespace:true,
  collapseInlineTagWhitespace:true,
  conservativeCollapse:true,
  minifyCSS:true,
  minifyJS: true,
  removeComments:true,
  trimCustomFragments:true
  }
 })
 ],
 optimization: {
 minimize: true//是否壓縮代碼
 }
};

上面的minify參數(shù)主要是配置html壓縮的

入口文件test.js

這里面沒有任何有關(guān)webpack的代碼，全是項(xiàng)目的業(yè)務(wù)代碼，故在這里就不粘了

運(yùn)行webpack 大功告成

我們來看看打包前后的html

打包前：

打包后

大小對比

啟動nodejs服務(wù)器

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

本文標(biāo)題：使用webpack怎么對nodejs項(xiàng)目進(jìn)行打包
網(wǎng)站網(wǎng)址：http://bm7419.com/article14/geigde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、網(wǎng)站設(shè)計(jì)公司、自適應(yīng)網(wǎng)站、做網(wǎng)站、全網(wǎng)營銷推廣、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)