Problems with Webpack 5 and html-webpack-plugin

[koseduhemak]

Hi!

I am trying to get responsive loader working with Webpack 5 and html-webpack-plugin... But it seems there is something wrong with URL / image path generation...

Html Webpack Plugin:
  Error: url.replace is not a function
  
  - index.html:243 new RelativeURL
    /Users/dv4h0w7/dev/appselector/src/html/index.html:243:35
  
  - loader.js:10 eval
    [index.html?..]/[html-webpack-plugin]/lib/loader.js:10:53
  
  - index.html:31 Object.../node_modules/html-webpack-plugin/lib/loader.js!./html/index.html
    /Users/dv4h0w7/dev/appselector/src/html/index.html:31:1
  
  - index.html:182 __webpack_require__
    /Users/dv4h0w7/dev/appselector/src/html/index.html:182:42
  
  - index.html:285 
    /Users/dv4h0w7/dev/appselector/src/html/index.html:285:37
  
  - index.html:288 
    /Users/dv4h0w7/dev/appselector/src/html/index.html:288:12
  
  - index.js:142 HtmlWebpackPlugin.evaluateCompilationResult
    [appselector]/[html-webpack-plugin]/index.js:142:28
  
  - index.js:324 
    [appselector]/[html-webpack-plugin]/index.js:324:26
  
  - runMicrotasks
  

My webpack config:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
//const { extendDefaultPlugins } = require("svgo");

const isDev = process.env.NODE_ENV === 'development';

if (isDev) {
  // only enable hot in development
  plugins.push(new webpack.HotModuleReplacementPlugin());
}

module.exports = {
  context: __dirname + '/src',
  entry: './js/entry.js',

  output: {
    path: __dirname + '/dist',
    filename: '[contenthash].bundle.js',
    publicPath: '',
    assetModuleFilename: "[name].[contenthash:8][ext]"
  },

  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
        }
      },
      {
        test: /\.(jpe?g|png|webp)$/i,
        type: 'javascript/auto',
        use: [
          {
            loader: 'responsive-loader',
            options: {
              adapter: require('responsive-loader/sharp'),
              // name: '[name]-[width].[ext]',
              // outputPath: 'images/',
              // esModule: false,
            },
          },
        ],
      },
      {
        test: /\.(svg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(scss)$/,
        use: [{
          // inject CSS to page
          loader: 'style-loader'
        }, {
          // translates CSS into CommonJS modules
          loader: 'css-loader',
        }, {
          // Run postcss actions
          loader: 'postcss-loader',
          options: {
            // `postcssOptions` is needed for postcss 8.x;
            // if you use postcss 7.x skip the key
            postcssOptions: {
              // postcss plugins, can be exported to postcss.config.js
              plugins: () => {
                [
                  require('autoprefixer')
                ];
              }
            }
          }
        }, {
          // compiles Sass to CSS
          loader: 'sass-loader'
        }]
      },
      {
        // ASSET LOADER
        test: /\.(woff|woff2|ttf|eot)$/,
        type: "asset/resource",
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
        exclude: /node_modules/
      },
     
    ],
  },

  optimization: {
    minimize: true,
    minimizer: [new CssMinimizerPlugin(),
      '...'
    ]
  },
  performance: {
    hints: false,
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './html/index.html'
    }),
    //require('autoprefixer'),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: '[contenthash].[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
    new FaviconsWebpackPlugin({
      logo: './static/img/hw_cloud_black.svg',
      //publicPath: '',
      prefix: 'images/favicons/'
    })
  ],

  devServer: {
    host: process.env.HOST, // Defaults to `localhost`
    port: process.env.PORT, // Defaults to 8080
    open: {
      app: {
        name: "Google Chrome", // Open the page in browser
      }
    },
    static: {
      directory: path.join(__dirname, 'dist')
    },
    compress: true,
  },

  watch: isDev,
};

If I remove responsive-loader (and just use inbuilt webpack functionality) everything works (except for image generation obviously).

I have several images embedded in the HTML:

<img class="card-img-top mt-3" src="../static/img/logo_gitlab.png" alt="GitLab">

It does work for images embedded in SASS (this generates header_full.jpg):

#bg_full_width {
    position: relative;
    height: 70vh;
    overflow: hidden;
    background: rgba(0, 0, 0, .5);
    background: url("../static/img/header_full.jpg?size=1900") no-repeat;
    background-size: cover;
    align-items: center;
    background-position: 50%;
    background-size: cover;
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
}

Versions of dependencies I am using right now:

...
"devDependencies": {
    "@babel/core": "^7.18.6",
    "@babel/preset-env": "^7.18.6",
    "@fortawesome/fontawesome-free": "^6.1.1",
    "autoprefixer": "^10.4.7",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "css-minimizer-webpack-plugin": "^4.0.0",
    "favicons": "^6.2.2",
    "favicons-webpack-plugin": "^5.0.2",
    "file-loader": "^6.2.0",
    "html-loader": "^3.1.2",
    "html-webpack-plugin": "^5.5.0",
    "image-minimizer-webpack-plugin": "^3.2.3",
    "image-webpack-loader": "^8.1.0",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss-loader": "^7.0.0",
    "responsive-loader": "^3.0.4",
    "sass-loader": "^13.0.2",
    "sharp": "^0.30.7",
    "style-loader": "^3.3.1",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-brands-svg-icons": "^6.1.1",
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.2.0-beta1",
    "jquery": "^3.6.0",
    "js-cookie": "^3.0.1",
    "sweetalert2": "^11.4.19"
  }
...

Using Node 16.15.1.

Any ideas @dazuaz ?

Thank you very much!

Best wishes

[gidich]

@koseduhemak - not sure if this will help you or not - I'm using CreateReactApp + Craco - and this article:

https://betterprogramming.pub/how-to-optimize-images-for-usage-in-websites-9eaee88c2e6b

I found to be extremely helpful - notably the part where you essentially have to override the default image/file loader:

(search for "webpackConfig.module.rules[1].oneOf[1]" in the article to see the section I'm referring to)

This article was also helpful in how to tweak the index.d.ts file to get it to no report import errors..