使用webpack怎么對nodejs項(xiàng)目進(jìn)行打包？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
遇到的問題：
1. 本項(xiàng)目沒有html頁面，ejs的作用也不是引入公共的組件，直接就是一個完整的頁面，用webpack中處理ejs文件的loader返回的是一個函數(shù)，故會產(chǎn)生問題
2.由于node.js配置了靜態(tài)資源目錄public，而視圖目錄與之同級，webpack在處理圖像等靜態(tài)資源目錄的路徑的時候會產(chǎn)生問題
3.如果使用publicpath 那么nodejs在運(yùn)行的時候就會找不到資源，因?yàn)樵O(shè)置了靜態(tài)資源的目錄
解決方案
1.處理ejs
我在各個論壇，官網(wǎng)搜尋良久，始終沒能找到，能處理我這種情況的loader。
沒有辦法之下，只能換一個思路，將ejs文件先轉(zhuǎn)為html
首先要修改文件，那么就要修改服務(wù)器的模板引擎（這里是我的app.js）
那么要修改成什么呢？我要讓nodejs使用ejs模板引擎，但是使用html文件來渲染
這里我們要用的是express中的app.engine 來注冊一個引擎
代碼如下：
重慶分公司
重慶分公司
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文件的處理無一列外都用到了這個插件
既然那么多人用，那么它的強(qiáng)大是毋庸置疑的。
但是配置好后運(yùn)行webpack，報(bào)了一個locals未定義的錯誤
報(bào)錯代碼：
由于locals是由express中的res.render（）傳回頁面的數(shù)據(jù)，而在此時webpack處理的時候，理所當(dāng)然的會報(bào)未定義的錯誤了。
那么這個問題怎么解決呢？
我現(xiàn)在需要讓webpack幫我處理html中的資源，又要讓webpack不要理會ejs的語法，幫我繼續(xù)壓縮代碼，就陷入了一個十分難受的境地。
在搜尋良久無果后，一篇誤打誤撞的文章啟發(fā)了我
這篇文章的博主是希望，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",//生產(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)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
