HtmlWebpackPlugin - 错误: 加载器"[...]/html-webpack-plugin - /lib/loader.js!/[...]/src/index.html"未返回HTML

Question

我正在尝试使用 HtmlWebpackPlugin 加载 HTML 模板，但似乎无法正常工作。如果我尝试不带参数加载插件，则可以正常工作。有什么想法吗？

请注意，我要加载的 index.html 文件已经放置在正确的位置。

package.json:

{
 ...
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@storybook/html": "^5.2.8",
    "babel-loader": "^8.0.6",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "css-loader": "^3.2.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.3",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "axios": "^0.19.0"
  }
}

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  devtool: 'source-map',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /.(ts|tsx)?$/,
        loader: 'ts-loader',
        include: [path.resolve(__dirname, 'src')],
        exclude: [/node_modules/]
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  devServer: {
    hot: true,
    host: '0.0.0.0'
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.scss', '.css']
  }
};

- Lhew

Answer 1

对我而言，解决方案是确保所有内容都已更新。

我的Webpack版本是5，除了html-webpack-plugin之外，其他的都是最新的。我将html-webpack-plugin从v4升级到v5，问题就消失了。

- trusktr

---

我想让你知道，你回答了一个一年前的问题，仅仅7个小时后就解决了我的问题。 :) - Patrick McElhaney

哦，一样的问题，好奇怪啊。这一定是由于最近Webpack的一个重大变更导致的，尽管我不记得升级过它... - Benjamin Ashbaugh

这真的很奇怪！！我突然遇到了这个问题，卡在我们的生产构建上，最终通过升级最新版本才解决了它！ - SDB

我在尝试解决另一个问题时，升级到v5时实际上遇到了这个错误。 - Tomas Jansson

升级到html-webpack-plugin的第5版成功了！ - Ronen

Answer 2

来自html-webpack-plugin文档

，请勿设置任何loader。

Don't set any loader

By default (if you don't specify any loader in any way) a fallback lodash loader kicks in.

{
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

Be aware, using .html as your template extention may unexpectedly trigger another loader.

请先按照文档操作，并查看是否存在任何加载器冲突。

- Mr.

---

@Lhew：非常荣幸 :) - Mr.

我遇到了这个错误。我没有加载器冲突。我也没有为 ".html" 文件设置任何加载器。 - trusktr