webpack 3.X學(xué)習(xí)之多頁面打包的方法
簡介
我們開發(fā)不可能只寫一個頁面，每次都要寫很多頁面，這時為了開發(fā)效率，我們使用前端自動化工具webpack，那么webpack是如何打包頁面的呢？又是如何打包多頁面的呢？
單頁面打包
我們知道要打包單頁面的方法，很簡單，配置入口，和html插件，
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config = {
entry:{
index:'./src/index.js'
},
output:{
path: path.join(__dirname, 'dist'),
filename: 'js/index.js'
}
...
plugins:[
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
hash: true,
minify: {
removeAttributeQuotes:true,
removeComments: true,
collapseWhitespace: true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true
}
})
]
}
上面的配置就是打包一個單頁面的代碼，具體配置項的意思請參考HTMLWebpackPlugin;
如何打包多頁面
在學(xué)了webpack之后，我的感受是我會配置webpack了，也能運行了，但是學(xué)習(xí)的過程中都是單頁面的，那么多頁是如何打包的呢？其實多頁面的打包和單頁面的打包的原理是一樣的，只是多配置幾個對應(yīng)的入口，和出口，以及HtmlWebpackPlugin對象；當(dāng)然你完全可以像下面這樣：
const config = {
entry:{
index:'./src/index.js'，
info:'./src/index.js'
},
output:{
path: path.join(__dirname, 'dist'),
filename: 'js/[name].js'
}
...
plugins:[
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
chunks:['index'],
hash: true,
minify: {
removeAttributeQuotes:true,
removeComments: true,
collapseWhitespace: true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true
}
}),
new HtmlWebpackPlugin({
filename: 'info.html',
template: './src/info.html',
hash: true,
chunks:['info'],
minify: {
removeAttributeQuotes:true,
removeComments: true,
collapseWhitespace: true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true
}
})
]
}
細(xì)心的你肯定發(fā)現(xiàn)我改變了幾個地方，一是,把output.filename的‘js/index.js'變成了‘js/[name].js',這是因為我們是多頁面，每個頁面對應(yīng)相應(yīng)的js這樣方便管理，二是，在HtmlWebpackPlugin對象中添加了chunks這個屬性，chunk屬性是讓你選擇對應(yīng)的js模塊；
上面這種寫法當(dāng)然是沒有問題，這是只有兩個頁面無所謂，那么有十個甚至更多呢，我們一直做著重復(fù)的事，這不是我們程序員的風(fēng)格，我們就是為了能夠偷懶才做程序員的不是嗎?(當(dāng)然還有高工資(#^.^#))，接下來我們來抽離這些重復(fù)的事；
首先，我們通過Node的glob對象，來獲取我們存在的html或js；
/**
*
* @param {string} globPath 文件的路徑
* @returns entries
*/
function getView(globPath,flag){
let files = glob.sync(globPath);
let entries = {},
entry, dirname, basename, pathname, extname;
files.forEach(item => {
entry = item;
dirname = path.dirname(entry);//當(dāng)前目錄
extname = path.extname(entry);//后綴
basename = path.basename(entry, extname);//文件名
pathname = path.join(dirname, basename);//文件路徑
if (extname === '.html') {
entries[pathname] = './' + entry;
} else if (extname === '.js') {
entries[basename] = entry;
}
});
return entries;
}
既然，我們已經(jīng)有了getView()函數(shù)，可以獲取html和js文件，那么我們就可以確定有多少個入口，和多少個頁面;
let entriesObj = getView('./src/js/*.js');
let config = {
entry:entriesObj,
...
}
上面我們就配置好了入口，不需要我們手動添加了，有多少js就有多少入口；
let pages = Object.keys(getView('./src/*html'));
pages.forEach(pathname => {
let htmlname = pathname.split('src\\')[1];
let conf = {
filename: `${htmlname}.html`,
template: `${pathname}.html`,
hash: true,
chunks:[htmlname],
minify: {
removeAttributeQuotes:true,
removeComments: true,
collapseWhitespace: true,
removeScriptTypeAttributes:true,
removeStyleLinkTypeAttributes:true
}
}
config.plugins.push(new HtmlWebpackPlugin(conf));
});
最后，我們獲取HTML頁面，和添加對應(yīng)頁面的HTMLWebpackPlugin對象；
后記
通過以上的三個步驟，就可以配置好一個可以打包多頁面的webpack工具；本人的水平比較有限，在書寫的過程中，可能有很多說的比較模糊，請多多包涵，也請大神拍磚，多多指教
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了用js提交表單解決一個頁面有多個提交按鈕的問題,主要是判斷是否為提交文本，然后再執(zhí)行相應(yīng)的動作，需要的朋友可以參考下2014-09-09
一個鼠標(biāo)移動滑出層的代碼，根據(jù)網(wǎng)上的視頻教程學(xué)習(xí)的，這也算是第一次練手吧，鼠標(biāo)靠近復(fù)選框的時候，就會顯示出一個層，移開則消失。2011-08-08
js 自制滾動條的小例子，需要的朋友可以參考一下2013-03-03
createTextRange()的使用示例含文本框選中部分文字內(nèi)容
這篇文章主要介紹了createTextRange()的使用示例,需要的朋友可以參考下2014-02-02
這篇文章介紹了lodash中pick和omit函數(shù)的用法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
使用JavaScript實現(xiàn)文本收起展開(省略)功能
省略號,作為一種常見的文本處理方式,在很多情況下都十分常見,特別是當(dāng)我們需要在省略號后面添加額外文字時,本文為大家介紹了使用JavaScript實現(xiàn)文本收起展開功能的相關(guān)方法,希望對大家有所幫助2024-04-04
js 實現(xiàn)省市區(qū)三級聯(lián)動菜單效果
JavaScript實現(xiàn)為input與textarea自定義hover,focus效果的方法