问题

HTML无法编译。错误似乎发生在提取加载程序中。似乎是在生成main-bundle.js的位置与提取加载程序希望在何处找到main-bundle.js（？）

重现步骤

1. npm i -g网络包、网络包客户端、网络包开发服务器
2. npm i webpack，webpack-cli，webpack-dev-server，html加载程序，文件加载程序，提取加载程序
   1.首页〉〉关于我们〉〉
   1.写出html文件的一些内容
   1.配置文件/配置文件
   1.将以下内容放入src/main.js中

require('./main.css')
require('./index.html')

1.将以下内容放入config/webpack.dev.js中

const path = require('path')

module.exports = {
  entry: {
    main: "./src/main.js",
  },
  mode: "development",
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist"),
    publicPath: "/",
  },
  devServer: {
    static: "dist",
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          }
        ]
      },
      {
        test: /\.html$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].html',
            }
          },
          {
            loader: 'extract-loader',
          },
          {
            loader: 'html-loader',
            options: {
              esModule: false,
            }
          },
        ]
      }
    ]
  }
};

相关性

本地

“css加载程序”：“^6.7.1”，“提取加载程序”：“^5.1.0”，“文件加载程序”：“^6.2.0”，“html加载程序”：“^4.2.0”，“样式加载器”：“^3.3.1”，“网页套件”：“^5.74.0”，“网络套件客户端”：“^4.10.0”，“网页套件开发服务器”：“^4.11.1”

全球

“网络套件”：“^5.74.0”，“网络套件-客户端”：“^4.10.0”，“网页套件开发服务器”：“^4.11.1”

实际行为

HTML编译链中的第二个extract-loader抛出错误。

Error: Cannot find module './main-bundle.js' from 
'C:...path\home\src'

预期行为

编译成功

屏幕截图

第一次

您的环境：

浏览器：Chrome操作系统：Windows NT、Windows 10家庭版10.0.19044节点J：16.17.0国家预防措施：8.19.2

其他上下文

我使用的是普通的js语法，提取加载器可能不会读取它。