您好,登錄后才能下訂單哦!
這篇文章主要為大家分析了通用webpack多頁面自動導入方案是怎么樣的的相關(guān)知識點,內(nèi)容詳細易懂,操作細節(jié)合理,具有一定參考價值。如果感興趣的話,不妨跟著跟隨小編一起來看看,下面跟著小編一起深入學習“通用webpack多頁面自動導入方案是怎么樣的”的知識吧。
在之前,我寫了一個webpack的模板。在平時我寫栗子或者是寫幾個頁面的時候會用到它。當這個模板需要多個頁面時需要手動到webpack.config.ts文件中配置entry和HtmlWebpackPlugin,有點麻煩。
我們項目中的頁面都是存放在src/pages/*.html中的,我們可以搜索這里文件夾下的html文件我們可以利用node中的glob包中的.sync方法,用來匹配搜索我們想要的文件。將匹配到的文件名自動生成一個entrys對象賦值到webpack.config.ts文件中的entry屬性即可。HtmlWebpackPlugin同理。
pnpm add glob
在src目錄下創(chuàng)建uilts/index.ts文件,引入所需的依賴包(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方法,用于搜索頁面所引入的腳本文件,該方法需要傳入一個匹配規(guī)則也就是路徑,使用glob包中的.sync方法進行搜索,該方法返回匹配到的數(shù)據(jù)集。將獲獎到的文件名稱及路徑拼接成entry對象所需的key:value即可,最終getEntry返回一個對象。
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方法,用于輸出所有匹配到的HtmlWebpackPlugin對象。它同樣傳入一個匹配規(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; }
有了這兩個方法之后,在把兩個方法再封裝成getPages函數(shù).,到時候在webpack.config.ts中調(diào)用它就可以直接拿到entry對象和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, }; }
在webpack.config.ts中使用getPages函數(shù)。
引入getPages函數(shù),傳入項目中頁面所在的路徑。使用ES6的解構(gòu)獲獎返回的數(shù)據(jù)對象。
// webpack.config.ts const { entries, htmlPlugins } = getPages('./src/pages/**/*'); const config: Configuration = { mode: 'development', entry: entries, // ... plugins: [ ...htmlPlugins, ], };
關(guān)于“通用webpack多頁面自動導入方案是怎么樣的”就介紹到這了,更多相關(guān)內(nèi)容可以搜索億速云以前的文章,希望能夠幫助大家答疑解惑,請多多支持億速云網(wǎng)站!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。