Webpack not compiling HTML: Error appears at extract-loader

Question

Problem

HTML failing to compile. Error seems to take place with extract-loader. Appears to be a conflict regarding where main-bundle.js is generated and where extract loader is expecting to find main-bundle.js (?)

Steps to reproduce

1. npm i -g webpack, webpack-cli, webpack-dev-server
2. npm i webpack, webpack-cli, webpack-dev-server, html-loader, file-loader, extract-loader
3. touch src/main.js src/index.html src/main.css
4. write out some content for the html file
5. touch config/webpack.dev.js
6. Place the following into src/main.js

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

7. Place the following into 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,
            }
          },
        ]
      }
    ]
  }
};

Dependencies

Local

"css-loader": "^6.7.1", "extract-loader": "^5.1.0", "file-loader": "^6.2.0", "html-loader": "^4.2.0", "style-loader": "^3.3.1", "webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.11.1"

Global

"webpack": "^5.74.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.11.1"

Actual behaviour

The extract-loader, 2nd in the chain of HTML compilation is throwing an error.

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

Expected behaviour

Successful compilation

Screenshots

Your Environment:

Browser: Chrome Operating System: Windows_NT, Windows 10 Home 10.0.19044 Node Js: 16.17.0 NPM: 8.19.2

Additional context

I am using common js syntax, which may not be being read by the extract-loader.

Answer 1

The answer appears to be due to the extract-loader package being unmaintained. This answer covers the issue

Essentially the package is not maintained.