将变量从 html-webpack-plugin 传递给 pug 模板

Question

是否可以将变量传递给我之前在“html-webpack-plugin”中定义的“pug-html-loader”加载的 .pug 模板？

webpack.config.babel.js

...

{
  test: /\.pug$/,
  use: [
      {
          loader: 'html-loader'
      },
      {
          loader: 'pug-html-loader',
          options: {
              self: true
          }
      }]
}


...

 plugins: [

        new HtmlWebpackPlugin({
            chunks: ['index'],
            filename: 'index.html',
            template: './src/templates/layout.pug',
            title: 'Welcome',
            file: 'index'
        }),

        new HtmlWebpackPlugin({
            chunks: ['index', 'contact'],
            filename: 'contact.html',
            template: './src/templates/layout.pug',
            title: 'Contact us',
            file: 'contact'
        }),

]

在layout.html 中，我定义如下：

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>

<main>
    ${ require('html-loader!../partials/' + htmlWebpackPlugin.options.file + '.html' ) }
</main>

</body>
</html>

我如何使用它来传递所有变量 - 在 Webpack 插件中定义，以便在我的 PugTemplates 和文件中使用？该应用程序应该是一个创建简单网页的简单过程，它由几个静态页面组成。

Answer 1

您可以使用 InterpolateHtmlPlugin 替换 HTML 文件中的标签。

plugins: [

        // Makes some environment variables available in index.html.
        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        // In development, this will be an empty string.
        new InterpolateHtmlPlugin({
            PUBLIC_URL: publicUrl
        }),
...
}

您可以从react-dev-utils npm 包安装插件

const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');

您可以在此处查看完整示例：

HTML 文件：https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/public/index.html#L8

webpack 配置：https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.dev.js#L9和https://github.com/jquintozamora/react -typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.dev.js#L80-L82

package.json：https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/package.json#L55