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.