我看到以下错误，却不知道为什么：
ERROR in Error: Child compilation failed:
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <!DOCTYPE html>
| <html lang="en">
| <head>:
SyntaxError: Unexpected token (1:0)
- compiler.js:79 childCompiler.runAsChild
[testing]/[html-webpack-plugin]/lib/compiler.js:79:16
- Compiler.js:306 compile
[testing]/[webpack]/lib/Compiler.js:306:11
- Compiler.js:631 hooks.afterCompile.callAsync.err
[testing]/[webpack]/lib/Compiler.js:631:15
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[testing]/[tapable]/lib/Hook.js:154:20
- Compiler.js:628 compilation.seal.err
[testing]/[webpack]/lib/Compiler.js:628:31
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[testing]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1329 hooks.optimizeAssets.callAsync.err
[testing]/[webpack]/lib/Compilation.js:1329:35
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[testing]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1320 hooks.optimizeChunkAssets.callAsync.err
[testing]/[webpack]/lib/Compilation.js:1320:32
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[testing]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1315 hooks.additionalAssets.callAsync.err
[testing]/[webpack]/lib/Compilation.js:1315:36
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[testing]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1311 hooks.optimizeTree.callAsync.err
[testing]/[webpack]/lib/Compilation.js:1311:32
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[testing]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1248 Compilation.seal
[testing]/[webpack]/lib/Compilation.js:1248:27
- Compiler.js:625 compilation.finish.err
[testing]/[webpack]/lib/Compiler.js:625:18
- Compilation.js:1171 hooks.finishModules.callAsync.err
[testing]/[webpack]/lib/Compilation.js:1171:4
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[testing]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1163 Compilation.finish
[testing]/[webpack]/lib/Compilation.js:1163:28
- Compiler.js:622 hooks.make.callAsync.err
[testing]/[webpack]/lib/Compiler.js:622:17
- Compilation.js:1095 _addModuleChain
[testing]/[webpack]/lib/Compilation.js:1095:12
- Compilation.js:1007 processModuleDependencies.err
[testing]/[webpack]/lib/Compilation.js:1007:9
package.json
{
"private": true,
"scripts": {
"dev": "webpack --mode development",
"prd": "webpack --mode production"
},
"devDependencies": {
"@babel/core": "^7.4.4",
"axios": "^0.18.0",
"babel-loader": "^8.0.5",
"bootstrap": "^4.0.0",
"clean-webpack-plugin": "^2.0.1",
"cross-env": "^5.1",
"datatables.net": "^1.10.19",
"datatables.net-bs4": "^1.10.19",
"ejs": "^2.6.1",
"ejs-compiled-loader": "^1.1.0",
"ejs-html-loader": "^4.0.1",
"ejs-loader": "^0.3.3",
"ejs-render-loader": "^1.0.0",
"extract-loader": "^3.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"mini-css-extract-plugin": "^0.6.0",
"npm-run-all": "^4.1.5",
"popper.js": "^1.12",
"posthtml-cli": "^0.4.9",
"posthtml-extend": "^0.3.0",
"posthtml-loader": "^1.0.1",
"posthtml-modules": "^0.4.2",
"underscore": "^1.9.1",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-md5-hash": "0.0.6"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
'app': 'app.js'
},
output: {
path: __dirname + '/dist'
},
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, './')
]
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'ejs-html-loader',
options: {
title: 'TEST2',
page: './testing.html',
production: process.env.ENV === 'production'
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
inject: false,
hash: true,
publicPath: './',
title: 'TEST1',
page: './testing.html',
template: './layout.html',
filename: 'index.html',
showErrors: true
}),
new WebpackMd5Hash()
]
}
app.js
console.log('App!');
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App - <%= title %></title>
</head>
<body>
<%- include(page) %>
</body>
</html>
testing.html
<div class="content">
Hello World!
</div>
更新：我已经设法通过以下方法解决了意外令牌问题，但是，仍然存在一个问题，该ejs-html-loader无法访问htmlWebpackPlugin.options属性。我不知道如何修复此加载器，因为几乎没有关于如何创建加载器的文档。
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader'
},
{
loader: 'ejs-html-loader',
options: {
title: 'TEST2',
page: './testing.html',
production: process.env.ENV === 'production'
}
}
]
}
]
},