webpack - 如何使用 webpack 配置和 html-webpack-plugin 修复“子编译失败”

Question

我在配置 webpack 时遇到了以下问题。我该如何解决它们？我想使用我自己的index.html文件。

我的配置文件如下，错误信息在底部：

webpack.config.js：

module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              attrs: ['img:src', 'link:href']
            }
          }
        ],
        exclude: path.resolve(__dirname, '../node_modules')
      },
    ]
}
plugins: [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    template: 'public/index.html',
    inject: 'body',
    minify: true
  })
 ]

 

错误堆栈：Html Webpack 插件：

Error: Child compilation failed:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/cls/Documents/workspace/webpack/public/index.html: Unexpected token (1:0)
    at Object._raise (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:510:17)
    at Object.raiseWithData (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:503:17)
    at Object.raise (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:464:17)
    at Object.unexpected (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:3368:16)
    at Object.parseExprAtom (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:11648:20)
    at Object.parseExprAtom (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:7260:20)
    at Object.parseExprSubscripts (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:11217:23)
    at Object.parseUpdate (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:11197:21)
    at Object.parseMaybeUnary (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:11172:23)
    at Object.parseMaybeUnaryOrPrivate (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:10986:59)
ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/cls/Documents/workspace/webpack/public/index.html: Unexpected token (1:0)
    at Object._raise (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:510:17)
    at Object.raiseWithData (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:503:17)
    at Object.raise (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:464:17)
    at Object.unexpected (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:3368:16)
    at Object.parseExprAtom (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:11648:20)
    at Object.parseExprAtom (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:7260:20)
    at Object.parseExprSubscripts (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:11217:23)
    at Object.parseUpdate (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:11197:21)
    at Object.parseMaybeUnary (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:11172:23)
    at Object.parseMaybeUnaryOrPrivate (/Users/cls/Documents/workspace/webpack/node_modules/@babel/parser/lib/index.js:10986:59)
    at processResult (/Users/cls/Documents/workspace/webpack/node_modules/webpack/lib/NormalModule.js:721:19)
    at /Users/cls/Documents/workspace/webpack/node_modules/webpack/lib/NormalModule.js:827:5
    at /Users/cls/Documents/workspace/webpack/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/cls/Documents/workspace/webpack/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/cls/Documents/workspace/webpack/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/cls/Documents/workspace/webpack/node_modules/babel-loader/lib/index.js:59:103

- index.js:510 Object._raise
  [webpack]/[@babel]/parser/lib/index.js:510:17

- index.js:503 Object.raiseWithData
  [webpack]/[@babel]/parser/lib/index.js:503:17

- index.js:464 Object.raise
  [webpack]/[@babel]/parser/lib/index.js:464:17

- index.js:3368 Object.unexpected
  [webpack]/[@babel]/parser/lib/index.js:3368:16

- index.js:11648 Object.parseExprAtom
  [webpack]/[@babel]/parser/lib/index.js:11648:20

- index.js:7260 Object.parseExprAtom
  [webpack]/[@babel]/parser/lib/index.js:7260:20

- index.js:11217 Object.parseExprSubscripts
  [webpack]/[@babel]/parser/lib/index.js:11217:23

- index.js:11197 Object.parseUpdate
  [webpack]/[@babel]/parser/lib/index.js:11197:21

- index.js:11172 Object.parseMaybeUnary
  [webpack]/[@babel]/parser/lib/index.js:11172:23

- index.js:10986 Object.parseMaybeUnaryOrPrivate
  [webpack]/[@babel]/parser/lib/index.js:10986:59

- ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):

- SyntaxError: /Users/cls/Documents/workspace/webpack/public/index.html: Unexpected token (1:0)

- index.js:510 Object._raise
  [webpack]/[@babel]/parser/lib/index.js:510:17

- index.js:503 Object.raiseWithData
  [webpack]/[@babel]/parser/lib/index.js:503:17

- index.js:464 Object.raise
  [webpack]/[@babel]/parser/lib/index.js:464:17

- index.js:3368 Object.unexpected
  [webpack]/[@babel]/parser/lib/index.js:3368:16

- index.js:11648 Object.parseExprAtom
  [webpack]/[@babel]/parser/lib/index.js:11648:20

- index.js:7260 Object.parseExprAtom
  [webpack]/[@babel]/parser/lib/index.js:7260:20

- index.js:11217 Object.parseExprSubscripts
  [webpack]/[@babel]/parser/lib/index.js:11217:23

- index.js:11197 Object.parseUpdate
  [webpack]/[@babel]/parser/lib/index.js:11197:21

- index.js:11172 Object.parseMaybeUnary
  [webpack]/[@babel]/parser/lib/index.js:11172:23

- index.js:10986 Object.parseMaybeUnaryOrPrivate
  [webpack]/[@babel]/parser/lib/index.js:10986:59

- NormalModule.js:721 processResult
  [webpack]/[webpack]/lib/NormalModule.js:721:19

- NormalModule.js:827 
  [webpack]/[webpack]/lib/NormalModule.js:827:5

- LoaderRunner.js:399 
  [webpack]/[loader-runner]/lib/LoaderRunner.js:399:11

- LoaderRunner.js:251 
  [webpack]/[loader-runner]/lib/LoaderRunner.js:251:18

- LoaderRunner.js:124 context.callback
  [webpack]/[loader-runner]/lib/LoaderRunner.js:124:13

- index.js:59 
  [webpack]/[babel-loader]/lib/index.js:59:103

- child-compiler.js:169 
  [webpack]/[html-webpack-plugin]/lib/child-compiler.js:169:18

- Compiler.js:548 
  [webpack]/[webpack]/lib/Compiler.js:548:11

- Compiler.js:1118 
  [webpack]/[webpack]/lib/Compiler.js:1118:17


- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
  [webpack]/[tapable]/lib/Hook.js:18:14

- Compiler.js:1114 
  [webpack]/[webpack]/lib/Compiler.js:1114:33

- Compilation.js:2256 finalCallback
  [webpack]/[webpack]/lib/Compilation.js:2256:11

- Compilation.js:2547 
  [webpack]/[webpack]/lib/Compilation.js:2547:11


- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
  [webpack]/[tapable]/lib/Hook.js:18:14

I couldn't find any source of that error.