bundle - 如何创建具有多个html页面的Fusebox项目？

Question

我是 bundle 程序新手，目前正在学习 Fusebox。到目前为止，我真的很喜欢它，只是我不知道如何将它用于多页面项目。到目前为止我只能找到how to do this using webpack上的教程，不适用于 fusebox 。

<小时/>

在src文件夹中输入文件:

• index.html
• index2.html
• index.ts

dist 文件夹中所需的输出:

• app.js
• 供应商.js
• index.html
• index2.html

dist文件夹中的实际输出:

• app.js
• 供应商.js
• index.html

这是我在 fusion.js 文件中的配置:

Sparky.task("config", () => {
    fuse = FuseBox.init({
       homeDir: "src",
       output: "dist/$name.js",
       hash: isProduction,
       sourceMaps: !isProduction,
       plugins: [
           [SassPlugin(), CSSPlugin()],
           CSSPlugin(),
           WebIndexPlugin({ 
               title: "Welcome to FuseBox index",
               template: "src/index.html"
           },
           WebIndexPlugin({ 
               title: "Welcome to FuseBox index2",
               template: "src/index2.html"
           },
           isProduction && UglifyJSPlugin()
        ]
    });

    // vendor should come first
    vendor = fuse.bundle("vendor")
        .instructions("~ index.ts");

    // out main bundle
    app = fuse.bundle("app")
        .instructions(`!> [index.ts]`);

    if (!isProduction) {
        fuse.dev();
    }
});

在插件中设置 WebIndexPlugin 两次不起作用。使用fusebox设置多html页面项目的正确方法是什么？

Answer 1

WebIndexPlugin无法配置输出多个html文件。

但是，如果您不对生成的包使用哈希(例如: output: "dist/$name.$hash.js" )，则不需要 WebIndexPlugin -- 您可以将其从 plugins 中完全删除选项。因为您已经知道生成的包的名称( vendor.js 和 app.js )，所以您可以只包含以下行

<script src="vendor.js"></script>
<script src="app.js"></script>

代替占位符$bundles .

如果您愿意，这两个 html 文件都是从您的 src 复制的。目录进入你的 dist目录中，您可以将以下行添加到 fuse.js脚本:

const fs = require('fs-extra');
fs.copySync('src/index.html', 'dist/index.html');
fs.copySync('src/index2.html', 'dist/index2.html');

注意:不要忘记添加fs-extra:^5.0.0给您package.json