webpack多页面自动导入方案
前言
在之前,我写了一个
webpack
的模板。在平时我写栗子或者是写几个页面的时候会用到它。当这个模板需要多个页面时需要手动到webpack.config.ts
文件中配置entry
和HtmlWebpackPlugin
,有点麻烦。
思考
我们项目中的页面都是存放在src/pages/*.html
中的,我们可以搜索这里文件夹下的html
文件我们可以利用node
中的glob
包中的.sync
方法,用来匹配搜索我们想要的文件。将匹配到的文件名自动生成一个entrys
对象赋值到webpack.config.ts
文件中的entry
属性即可。HtmlWebpackPlugin
同理。
安装glob
pnpm add glob
创建工具类
在src
目录下创建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
封装getEntry
方法,用于搜索页面所引入的脚本文件,该方法需要传入一个匹配规则也就是路径,使用glob
包中的.sync
方法进行搜索,该方法返回匹配到的数据集。将获奖到的文件名称及路径拼接成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
封装getHtmlWebpackPlugin
方法,用于输出所有匹配到的HtmlWebpackPlugin
对象。它同样传入一个匹配规则,匹配所有*.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
函数.,到时候在webpack.config.ts
中调用它就可以直接拿到entry
对象和htmlPlugins
数组。
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
函数。
引入getPages
函数,传入项目中页面所在的路径。使用ES6
的解构获奖返回的数据对象。
// webpack.config.ts
const { entries, htmlPlugins } = getPages('./src/pages/**/*');
const config: Configuration = {
mode: 'development',
entry: entries,
// ...
plugins: [
...htmlPlugins,
],
};
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanekhk
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01