You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
varwebpack=require('webpack');varHtmlWebpackPlugin=require('html-webpack-plugin');varpath=require('path');constMiniCssExtractPlugin=require('mini-css-extract-plugin');constCssMinimizerPlugin=require('css-minimizer-webpack-plugin');constFaviconsWebpackPlugin=require('favicons-webpack-plugin');constImageMinimizerPlugin=require("image-minimizer-webpack-plugin");//const { extendDefaultPlugins } = require("svgo");constisDev=process.env.NODE_ENV==='development';if(isDev){// only enable hot in developmentplugins.push(newwebpack.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 pageloader: 'style-loader'},{// translates CSS into CommonJS modulesloader: 'css-loader',},{// Run postcss actionsloader: 'postcss-loader',options: {// `postcssOptions` is needed for postcss 8.x;// if you use postcss 7.x skip the keypostcssOptions: {// postcss plugins, can be exported to postcss.config.jsplugins: ()=>{[require('autoprefixer')];}}}},{// compiles Sass to CSSloader: 'sass-loader'}]},{// ASSET LOADERtest: /\.(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: [newCssMinimizerPlugin(),'...']},performance: {hints: false,maxEntrypointSize: 512000,maxAssetSize: 512000,},plugins: [newHtmlWebpackPlugin({template: './html/index.html'}),//require('autoprefixer'),newMiniCssExtractPlugin({// Options similar to the same options in webpackOptions.output// all options are optionalfilename: '[contenthash].[name].css',chunkFilename: '[id].css',ignoreOrder: false,// Enable to remove warnings about conflicting order}),newFaviconsWebpackPlugin({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 8080open: {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).
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...
My webpack config:
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:
It does work for images embedded in SASS (this generates header_full.jpg):
Versions of dependencies I am using right now:
Using Node 16.15.1.
Any ideas @dazuaz ?
Thank you very much!
Best wishes
The text was updated successfully, but these errors were encountered: