Question

我正在使用html-webpack-plugin，在实例化模板时，它会将模板作为选项之一：

new HtmlWebpackPlugin({
  title: 'UserPage Title',
  filename: `user/index.html`,
  template: path.resolve(__dirname, 'src', 'user/index.html'), // <-- this
  chunks: ['user'],
  hash: true
})

在user/index.html中，我有以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <header>
        My fancy header
    </header>
    <main>
        // user page's actual content
    </main>
    <aside>
        My fancy sidebar
    </aside>
    <footer>
        My fancy footer
    </footer>
</body>
</html>

现在，如果我只有一个页面来处理此问题，那很好，但是如果我为其他页面添加更多模板，那么我将不必要地重复很多代码。例如，页眉，页脚，侧边栏等在页面之间都相同，因此无需在每个模板中重复它们。实际上，我唯一想保留在user/index.html中的就是这一部分：

<main>
    // user page's actual content
</main>

所以我想创建一个名为base-template.html的新文件，其内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <header>
        My fancy header
    </header>

    <%= htmlWebpackPlugin.options.content %>

    <aside>
        My fancy sidebar
    </aside>
    <footer>
        My fancy footer
    </footer>
</body>
</html>

当实例化插件时，我想做类似的事情：

new HtmlWebpackPlugin({
  //...
  template: path.resolve(__dirname, 'src', 'base-template.html'),
  content: path.resolve(__dirname, 'src', 'user/index.html') // doesn't work
  //....
})

这当然是行不通的，它所做的只是显示文件路径而不是注入实际内容。如何在原处加载user/index.html的内容？

如何在Webpack中设置“基本模板”？

0 个答案: