Я пытаюсь использовать DefinePlugin с 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 .
Конечно, я хочу извлечь это HTML в отдельный файл, используя extract-loader и 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 готов к его прикосновению. Что мне здесь не хватает?