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

Question

我是捆绑器的新手，目前正在学习 Fusebox。到目前为止，我真的很喜欢它，除了我不知道如何将它用于多页项目。到目前为止，我只能找到有关如何使用 webpack 执行此操作的教程，而不是 fusebox。

---

src 文件夹中的输入文件：

• 索引.html
• 索引2.html
• 索引.ts

dist 文件夹中的所需输出：

• 应用.js
• 供应商.js
• 索引.html
• 索引2.html

dist 文件夹中的实际输出：

• 应用.js
• 供应商.js
• 索引.html

这是我在保险丝.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

Answer 2

提出

问题时可能不是这种情况，但现在WebIndexPlugin可以多次指定，并且还可以采用可选的bundles参数，其中可以指定要包含在 html 中的捆绑包列表（默认情况下包含所有捆绑包）。

例如，2 个 html 文件 （app1.html、app2

.html），其中每个文件包含一个公共库（供应商.js）和不同的入口点（app1.js 和 app2.js）

• 应用1.html
  • 供应商.js
  • 应用1.js
• 应用2.html
  • 供应商.js
  • 应用2.js

配置将如下所示：

const fuse = FuseBox.init({
    homeDir : "src",
    target : 'browser@es6',
    output : "dist/$name.js",
    plugins: [
        WebIndexPlugin({
            target: 'app1.html',
            bundles:['vendor', 'app1']
        }),
        WebIndexPlugin({
            target: 'app2.html',
            bundles:['vendor', 'app2']
        })
    ]
})
// vendor bundle, extracts dependencies from index1 and index2:
fuse.bundle("vendor").instructions("~[index1.ts,index2.ts]")
// app1 and app2, bundled separately without dependencies:
fuse.bundle("app1").instructions("!>index1.ts")
fuse.bundle("app2").instructions("!>index2.ts")