在之前，我寫(xiě)了一個(gè)webpack的模板。在平時(shí)我寫(xiě)栗子或者是寫(xiě)幾個(gè)頁(yè)面的時(shí)候會(huì)用到它。當(dāng)這個(gè)模板需要多個(gè)頁(yè)面時(shí)需要手動(dòng)到webpack.config.ts文件中配置entry和HtmlWebpackPlugin，有點(diǎn)麻煩。

思考

我們項(xiàng)目中的頁(yè)面都是存放在src/pages/*.html中的，我們可以搜索這里文件夾下的html文件我們可以利用node中的glob包中的.sync方法，用來(lái)匹配搜索我們想要的文件。將匹配到的文件名自動(dòng)生成一個(gè)entrys對(duì)象賦值到webpack.config.ts文件中的entry屬性即可。HtmlWebpackPlugin同理。

安裝glob

pnpm add glob

創(chuàng)建工具類(lèi)

在src目錄下創(chuàng)建uilts/index.ts文件，引入所需的依賴(lài)包（glob、path、html-webpack-plugin）。

src
? └─uilts
? ?? ?└─index.ts

// uilts/index.ts
import Glob from 'glob';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

getEntry

封裝getEntry方法，用于搜索頁(yè)面所引入的腳本文件，該方法需要傳入一個(gè)匹配規(guī)則也就是路徑，使用glob包中的.sync方法進(jìn)行搜索，該方法返回匹配到的數(shù)據(jù)集。將獲獎(jiǎng)到的文件名稱(chēng)及路徑拼接成entry對(duì)象所需的key:value即可，最終getEntry返回一個(gè)對(duì)象。

export function getEntry(globPath: string): entryObj {
? const entries: entryObj = { main: './src/main.ts' };
? Glob.sync(`${globPath}.ts`).forEach((entry: string) => {
? ? const basename: string = path.basename(entry, path.extname(entry));
? ? const pathname: string = path.dirname(entry);
? ? entries[basename] = `${pathname}/${basename}`;
? });
? return entries;
}

getHtmlWebpackPlugin

封裝getHtmlWebpackPlugin方法，用于輸出所有匹配到的HtmlWebpackPlugin對(duì)象。它同樣傳入一個(gè)匹配規(guī)則，匹配所有*.html文件，

export function getHtmlWebpackPlugin(globPath: string): HtmlWebpackPlugin[] {
? const htmlPlugins: HtmlWebpackPlugin[] = [];
? Glob.sync(`${globPath}.html`).forEach((entry: string) => {
? ? const basename: string = path.basename(entry, path.extname(entry));
? ? const pathname: string = path.dirname(entry);
? ? htmlPlugins.push(new HtmlWebpackPlugin({
? ? ? title: basename,
? ? ? filename: `${basename}.html`,
? ? ? template: `${pathname}/${basename}.html`,
? ? ? chunks: [basename, 'main'],
? ? ? minify: true,
? ? }));
? });
? return htmlPlugins;
}

二次封裝

有了這兩個(gè)方法之后，在把兩個(gè)方法再封裝成getPages函數(shù).，到時(shí)候在webpack.config.ts中調(diào)用它就可以直接拿到entry對(duì)象和htmlPlugins數(shù)組。

interface getPagesType {
? entries: entryObj,
? htmlPlugins: HtmlWebpackPlugin[]
}

export function getPages(pagePath: string): getPagesType {
? const entries: entryObj = getEntry(pagePath);
? const htmlPlugins: HtmlWebpackPlugin[] = getHtmlWebpackPlugin(pagePath);
? return {
? ? entries,
? ? htmlPlugins,
? };
}

應(yīng)用

在webpack.config.ts中使用getPages函數(shù)。
引入getPages函數(shù)，傳入項(xiàng)目中頁(yè)面所在的路徑。使用ES6的解構(gòu)獲獎(jiǎng)返回的數(shù)據(jù)對(duì)象。

// webpack.config.ts
const { entries, htmlPlugins } = getPages('./src/pages/**/*');

const config: Configuration = {
? mode: 'development',
? entry: entries,
? // ...
? plugins: [
? ? ...htmlPlugins,
? ],
};

到此這篇關(guān)于詳解通用webpack多頁(yè)面自動(dòng)導(dǎo)入方案的文章就介紹到這了,更多相關(guān)webpack多頁(yè)面自動(dòng)導(dǎo)入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: