What is the general webpack multi-page automatic import scheme?

This article mainly analyzes the relevant knowledge of the general webpack multi-page automatic import scheme, the content is detailed and easy to understand, the operation details are reasonable, and has a certain reference value. If you are interested, you might as well follow the editor to have a look, and follow the editor to learn more about "what the general webpack multi-page automatic import scheme is like".

Preface

Earlier, I wrote a template for webpack. I usually use it when I write chestnuts or write a few pages. When this template requires multiple pages, you need to manually configure entry and HtmlWebpackPlugin in the webpack.config.ts file, which is a bit troublesome.

Thinking

All the pages in our project are stored in src/pages/*.html, and we can search the html files in the folder here. We can use the .sync method in the glob package in node to match and search the files we want. Automatically generate an entrys object that matches the filename and assign it to the entry attribute in the webpack.config.ts file. HtmlWebpackPlugin is the same.

Install the globpnpm add glob creation tool class

Create the uilts/index.ts file in the src directory and introduce the required dependent packages (glob, path, html-webpack-plugin).

Src └─ uilts └─ index.ts// uilts/index.tsimport Glob from 'glob';import path from' path';import HtmlWebpackPlugin from 'html-webpack-plugin';getEntry

Encapsulate the getEntry method to search for the script file introduced by the page, which requires passing in a matching rule, that is, the path, using the .sync method in the glob package, which returns the matched dataset. Splice the name and path of the winning file into the key:value required by the entry object, and finally getEntry returns an object.

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

Encapsulates the getHtmlWebpackPlugin method, which outputs all matching HtmlWebpackPlugin objects. It also passes in a matching rule that matches all * .html files

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;} secondary packaging

With these two methods, after encapsulating the two methods into getPages functions, when called in webpack.config.ts, you can directly get the entry object and the htmlPlugins array.

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,};} Application

Use the getPages function in webpack.config.ts.

Introduce the getPages function, passing in the path where the page in the project is located. Use ES6 to deconstruct the award-winning data object.

/ / webpack.config.tsconst {entries, htmlPlugins} = getPages ('. / src/pages/**/*'); const config: Configuration = {mode: 'development', entry: entries, / /. Plugins: [... htmlPlugins,],}

On the "general webpack multi-page automatic import scheme is how" this is introduced here, more related content can search previous articles, hope to help you answer questions, please support the website!