Category : webpack-5

In Webpack 5, module.reasons was removed (see: https://webpack.js.org/blog/2020-10-10-webpack-5-release/). From what I have been able to find, the documentation doesn’t list an alternative. Documentation for the module graph is also pretty scarce. We have build code that currently checks module.reasons inside of the splitChunksPlugin test() function. That code breaks in Webpack 5. Does anyone know what ..

Read more

Using Webpack 5, I want to import an image from the root directory using the new built-in asset/resource type. import Icon from ‘assets/images/heart.svg’; Rather than import Icon from ‘../../assets/images/heart.svg’; In Webpack 4, it was the file-loader’s context option. { test: /images/(.*).(png|jpg|gif|svg)$/, use: [{ loader: ‘url-loader’, options: { limit: 8192, name: ‘[path][name].[ext]’, context: ‘./app/assets’ } }] ..

Read more

I coded my library which add Class to global window object: const Maplat = window.Maplat = {}; Maplat.createObject = blah blah.. With being compiled by webpack4, this works very well. <html> <head> <script src="./assets/maplat_core.js"></script> </head> <body> <script> Maplat.createObject(…); // Works fine </script> </body> </html> But after I updated webpack 5, this does not work. I ..

Read more

Here’s my webpack 3 configuraion. function isVendorJS(module) { if (module.resource && (/^.*.(css|scss)$/).test(module.resource)) return false return module.context && module.context.includes(‘node_modules’) } const plugins = [ new webpack.optimize.CommonsChunkPlugin({ name: ‘view-vendor’, chunks: [‘view’], minChunks: isVendorJS }), new webpack.optimize.CommonsChunkPlugin({ name: ‘config-vendor’, chunks: [‘configuration’], minChunks: isVendorJS }), new webpack.optimize.CommonsChunkPlugin({ name: ‘common-vendor’, chunks: [‘config-vendor’, ‘view-vendor’], minChunks: 2 }) ] return { entry: ..

Read more

I use webpack for my appplication and in one of my templates I want to set the background-image rigth on div – like this: <div style="background-image: url(‘/path/to/my/image.png’)"> but this doesn’t work. my webpack setting for images is: rules: [ { test: /.(png|jpg|gif|svg|eot|ttf|woff)$/, type: "asset/resource", } ] but when I build, the image set on div ..

Read more

Imagine I’m creating a Webpack custom resolver plugin that redirects all requests to be resolved from directory ‘a’ to directory ‘b’ based on condition x. I understand that I need to call doResolve() to run all of the plugins again with the modified request. Now, in the case where I don’t want to modify the ..

Read more