Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Aug 10 17:24
    sokra synchronize #11302
  • Aug 10 17:24

    sokra on terser-plugin

    improve build dependencies reso… (compare)

  • Aug 10 14:50
    webpack-bot labeled #11302
  • Aug 10 14:34
    webpack-bot labeled #11302
  • Aug 10 14:34
    sokra opened #11302
  • Aug 10 14:33

    sokra on terser-plugin

    Upgrade terser-webpack-plugin m… (compare)

  • Aug 10 14:14
    sokra synchronize #7075
  • Aug 10 14:13

    sokra on master

    5.0.0-beta.25 (compare)

  • Aug 10 14:13

    sokra on v5.0.0-beta.25


  • Aug 10 14:02
    webpack-bot unlabeled #11297
  • Aug 10 14:02
    webpack-bot labeled #11297
  • Aug 10 00:12
    webpack-bot unlabeled #11275
  • Aug 10 00:12
    webpack-bot labeled #11275
  • Aug 09 23:50
    webpack-bot labeled #11275
  • Aug 09 23:50
    webpack-bot unlabeled #11275
  • Aug 09 23:50
    ScriptedAlchemy synchronize #11275
  • Aug 09 19:50
    vankop synchronize #11299
  • Aug 09 19:50

    vankop on evaluate-new-regexp

    increase coverage (compare)

  • Aug 09 19:42
    webpack-bot labeled #11299
  • Aug 09 19:18
    webpack-bot labeled #11299
Even though there are a lot more people having issues with Webpack
But maybe that's why the description of this channel is For questions please post on Stack Overflow and use the 'webpack' tag (
So not sure what this channel is for

Hi Guys, how do I reference a hashed img into the final build dist/index.html to be like <img src="logo.2342sdasd.png"> ?
What I'm doing right now is I'm hardcoding the logo image like this <img src="logo.png"> but when I build webpack it gets with the same name without hashing, of course because I'm hardcoding it inside src/index.html which is the htmlWebpackPlugin template.

Use a rule that tests for the image and uses a file-loader that specifies the file name with a hash

                test: /\.(png|jpeg|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[hash:5].[ext]',
                        outputPath: './images/'

Not sure why it's quoted me @mahmoudZakaria90

3 replies
Angus Hollands
@aliasflavius thanks, I ought to have read that -.-

Hi everyone, pretty new here so help if this is already answered before-

I'm trying to lazy load a component, but I want only one chunk file created for that component. Webpack is apparently creating multiple chunks even for stuff that is imported inside that component.

Any way to create one bundle for that component ?(given it doesn't use something common with rest of the application)

Also, if it helps, I have library:"umd" in the config :
  output: {
    path: Dir.DIST,
    publicPath: "http://localhost:8765/",
    ecmaVersion: 5,
    chunkFilename: `${CHUNKS_DIRECTORY_NAME}/[name].[chunkhash].chunk.js`,
    libraryTarget: "umd",
    library: [COMPONENTS_LIBRARY_NAME, "[name]"]
How do I import jQuery without binding it to the window object? I want to add my app to an WordPress page and don't want to face multiple versions of jQuery conflicting situation.
Hello, I want to ask a question, if the output filename is configured and Contenthash is added, when is the hash value generated during the compilation and build of WebPack? Will the hash values be recalculated from the contents of module and Chunk during the build process? If I extract the common module in the mode of 'initial' with splitchunks, when is the common chunkId generated? Looking forward to your reply~
Hi anyone knows why latest webpack doesnot compile successfully. it stops after [2] ./src/assets/css/bootstrap.min.css 80 bytes {0} [built]
    + 1 hidden module
Hey guys.... Firstly I have this problem of wanting to avoiding compiling my JS file to folder build or dist while that is located to a root folder of project ...I want all of my build or dist JS files to go inside another folder "public" that will be located to my root project folder .... YES it can be done but a strange thing is that I can't or no longer able to use webpack-dev-server... By that it's does run my files but my index page inside my public folder doesn't get auto reload is that a nature of webpack live server... How can I overcome this because I wanna work with structure that is similar on working with webpack using TS ... I wanna separate all my folder src when I work and I want all my assets(index.html, build/dist, css, images) to be inside public similar framework like but using ES6 ...The goal is to build a PWA ...
My second problem is to config webpack to compile two files app.js as entry point which will take all my modules bundle them to dist or build but also I want webpack and Babel to aware that I want to run another file of JS from src to public that will be my service worker sw.js so my goal is avoid writing inside public but work on src folder only using app.js for DOM and all interaction but also be able to create sw.js to be compiled to public also because all of my scope project that will be deployed will be inside a public folder...I can't use sapper or ReactNative or angular to avoid those suggestions THANK YOU

Hi guys, does anyone know how to remove TerserPlugin from my production build? according to this documment it's enabled by default. FML I can't remove it, I have managed to modify some of it's options but not to make it dissappear

Tom Hacohen
Hey, I built a library that has some optional dependencies. It works great when I use this library in node or in react-native (Metro bundler), but when I use this library in a Webpack project I get the "module not found" error. The require is surrounded with a try/catch, so I thought it would work. I looked online and can't find a solution. Editing the client's webpack config is not an option, as that would be terrible usability for users. Any idea? Thanks!
__non_webpack_require__ is not an option either because that breaks the metro bundler (react-native)
Daniel Florey
Hi all! Is this the right place to get some insights regarding the webpack5 module federation with dynamic remotes?
Does Webpack also have a Slack group?
How can I get an invite to the Slack group?
April Arcus
can I condition a loader on the name of mainField?
i.e. I would like to pass node_modules through babel if their mainField is module
but ignore them if their mainField is main
Hi there! Guys, I've gote a problem with file-loader. I can't understand why my settings in one project where I uploaded images works fine, and in another doesn't. Here are my settings from the project where everything works well, and the folder with images is added to "dist":
Screenshot 2020-08-08 at 11.51.06.png
Screenshot 2020-08-08 at 11.51.24.png
This is 'webpack.comon.js'
Screenshot 2020-08-08 at 12.01.51.png
Screenshot 2020-08-08 at 11.51.45.png
Screenshot 2020-08-08 at 11.54.15.png
I didn't write 'import' in my index.js adn it works perfectly.
And here is my recent project I'm working in. I prepare my workflow and testing and I can't add the image folder to 'dist'. Here're the screenshots:
Screenshot 2020-08-08 at 12.05.15.png
Screenshot 2020-08-08 at 12.06.15.png
Screenshot 2020-08-08 at 12.06.36.png
Screenshot 2020-08-08 at 12.06.57.png
Screenshot 2020-08-08 at 12.05.44.png
How can I add folder to 'dist' with all images inside?) Thanks a lot, and sorry for this bunch of screenshots.)
Amir Reza Mehrbakhsh

Hi everyone, I don't know the basic knowledge of webpack and JS bundles so I ran into a problem.

I installed Swiper plugin using npm install swiper

I'm using laravel-mix and below is my config file

How and where I should import my swiper file?

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss')
const destination = 'dist';

], destination + '/js/ketabuzz-front.js')
    .sass('resources/css/app.scss', destination + '/css/ketabuzz-front.css')
        processCssUrls: false,
        postCss: [tailwindcss('tailwind.config.js')],
    .copyDirectory('resources/fonts', destination + '/fonts')
    .copyDirectory('node_modules/font-awesome/fonts', destination + '/fonts/font-awesome');
Amir Reza Mehrbakhsh
// Cannot use import statement outside a module
import Swiper from 'swiper';

$(document).ready(function () {

    // Swiper is undefined
    new Swiper(".js-swiper-books", {
        slidesPerView: 6,
        slidesPerGroup: 5,

Matt Marsh
Hi all; I'm building a Node.js web application and as part of that there will be some browser side assets that I'd like to use Webpack to process (TypeScript and SCSS mainly). I'm wondering how I should structure my sources so that Webpack operates on the browser-side stuff and doesn't try to operate on the server-side stuff? Of course the output for the browser-side stuff will need to end up in a location that the Node.js can then serve it
I was wondering if there's an example of how to lay out a project like this? I'm sure I'm not the first person doing something similar!

Hello. We have a custom webpack module written for our company using the webpack. When I run "node --trace-deprecation node_modules/webpack/bin/webpack.js" I receive an error "ERROR in Entry module not found: Error: Can't resolve './src' in ..." with a path to my module at the end.

When I ran "webpack --display-error-details", it gives the error details as below:

Field 'browser' doesn't contain a valid alias configuration
using description file: "path to package.json" (relative path: ./src)
no extension
Field 'browser' doesn't contain a valid alias configuration
"path to parent dir/src" doesn't exist
Field 'browser' doesn't contain a valid alias configuration
"path to parent dir/src.wasm" doesn't exist

And same type of lines for .mjs, .js .json, similar to .wasm above.

Hi i am using webpack in my node project but i have hbs pages and I dont know how i use it for them ..i hope find the solution