1

我正在尝试使用DefinePluginwith html-loader。我正在使用插值html-loader，并尝试使用DefinePlugin插值表达式中的值。

这在我加载到时有效HtmlWebpackPlugin，或者当html-loader是用于 html 文件的唯一加载程序时，但如果我从加载html-loader到extract-loader，在尝试处理文件数据DefinePlugin之前似乎没有进行替换。extract-loader

例子：

src/index.html:

<!DOCTYPE html>
<html>
<head>
    <title>${ TITLE }</title>
</head>
<body>
</body>
</html>

webpack.config.js:

const { DefinePlugin } = require('webpack');

module.exports = {
  mode: 'none',
  entry: [
    "./src/index.html"
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              interpolate: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new DefinePlugin({
      TITLE: JSON.stringify('My page title')
    }),
  ]
};

这按预期工作，并且在观察输出时main.js，HTML 的插值部分已替换为 的My page title值TITLE。

当然，我想使用extract-loader和将此 HTML 提取到单独的文件中file-loader。一次采取这一步，我首先添加extract-loader以处理来自 的输出html-loader，如下所示：

...
    rules: [
      {
        test: /\.html$/,
        use: [
+++       "extract-loader",
          {
            loader: "html-loader",
            options: {
              interpolate: true
            }
          }
        ]
      }
    ]
...

这会导致构建失败：

ERROR in ./src/index.html
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: TITLE is not defined

我的期望是，由于文件是由加载程序按顺序处理的，TITLE应该已经被替换extractLoader.js为准备触摸它的时间了。我在这里想念什么？

4

0 回答 0