webpack 多入口文件生成HTML文件;

发布于 2022-09-05 01:54:23 字数 892 浏览 17 评论 0

多入口文件生成HTML文件;
根据入口文件的数量,来生成html;
例如:

clipboard.png
这里有两个入口文件,home和about;

使用html-webpack-plugin插件来new ;
如下:

clipboard.png

根据入口文件的数量来生成HTMl;
例如:上面有两个入口文件;
在下面的的时候就new 两次;
有没有可能把这个封装一下;来动态生存;不需要手动去配置;
我写了一半,写不下去了;

求各位大谁给个DOME;
有思路但是具体的方法不知道怎么去实现;node小白;;

xydArray.forEach(function(item){

var xydConf = {
    filename: './'+item+'.html',
    template: './'+item+'.html',
    chunks:[item],
    inject:true,
    hash:true
}
config.plugins.push(new htmlWebpackPlugin(xydConf));

});

module.exports = config;

xydArray就是入口文件的key值

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

青朷 2022-09-12 01:54:23
const pages = [
  {
    name: 'page0',
    title: 'page0',
  },
  {
    name: 'page1',
    title: 'page1',
  },
  {
    name: 'page2',
    title: 'page2',
  },
];

const plugins = pages.map(({ name, title }) => new HtmlWebpackPlugin({
  title,
  chunks: [name],
  filename: path.resolve(__dirname, `build/${name}.html`),
  template: path.resolve(__dirname, 'app/template.html'),
}));
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文