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

Question

我是个新手，目前正在学习Fusebox。到目前为止，我真的很喜欢它，只是我想不出如何将它用于多页项目。到目前为止，我只找到了一个关于如何用webpack做这件事？的教程，没有找到引信盒的教程。

在src文件夹中输入文件：

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

dist文件夹中的期望输出：

• app.js
• vendor.js
• index.html
• index2.html

dist文件夹中的实际输出：

• app.js
• vendor.js
• index.html

下面是我在fuse.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中的包列表(默认情况下包括所有包)。

例如，两个html文件(app1.html，app2.html)，每个文件包含一个公共库(vendor.js)和不同的入口点(app1.js和app2.js)

• app1.html
  • vendor.js
  • app1.js

​

• app2.html
  • vendor.js
  • app2.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")