Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    Christoph Werner
    Hello fellow webpackers!
    I need to show multiple errors when aborting/breaking a build from a plugin. When i push multiple Errors to compilation.errors, only the first one is shown. What can i do?
    Jaisa Ram
    webpack compression plugin configuration for prodction
    I mean recommended configuration
    Hi is there a way that I can indentify if the compilation is a incremental compiler or not?
    in the plugin
    Jawad Sefiani
    Hi everyone!
    Has anyone ran a react app in a docker container while developing?
    Chester Beard
    @jsefiani why would you want todo that?

    Hi there;

    sorry if i should ask this elsewhere,

    I'm writing a plugin that allow :

    • Inheriting one/multiple npm packages using webpack and this plugin like a big class ( by resolving require('$super') etc )
    • Do glob require on the folders within the inheritable root folder ( like require('App/stuff/*.js')
    • compile using the webpack conf of an inherited project (pretty cool)

    Even if it need optims, It work fine ( and it was working for some time where i extracted it )


    But a have a problem with hot reload:
    To require globs; i create a virtual file which will require & map the glob in es6
    How can i force Webpack to update this index file first when one the glob query files are deleted ?

    here the samples https://github.com/n8tz/webpack-inherit-samples
    here the glob query : https://github.com/n8tz/webpack-inherit-samples/blob/master/simple-inherit/childProject/App/App.js

    ( hoping someone know how to do that ^^' :) )
    @jsefiani yeah ; as i'm on windows & i'm tired of dealing with microsoft compiler / various back techs -> all my dev env are on dockers now
    you just need to bind the ports & get the good docker-compose
    ok i replaced the glob with require.context ; now https://github.com/n8tz/webpack-inherit is fully working :)
    Feel free to test / feedback / make contribs !
    barak igal
    Hi, does anyone know why the inputFileSystem doesn't reflect changes from watch when file is changed?
    The style is confusing when I expanded the two menus in https://webpack.js.org/api/
    @barak007 should i at anybody?
    Rhys van der Waerden
    there is a probably a repo for that website
    You should open an issue
    @rhys-vdw thank you,man!
    Hi guys. I'm trying to fix some code in webpack-dev-server but I can't find which code line actually starts compile (compile.run(...)). I have tried to search both webpack-dev-server and webpack-dev-middleware but still not getting it. Could anybody tell me plz where the code is? :|
    Ross Rawlins
    hey all can anyone explain a good way to get all my HTML pages to compile without having to sepcify a opath for each one?
    I have 50 plus pages and growing and I dont want to have to define each one
    Harshit Verma
    Hi everyone, I am Harshit. I am newbie in webpack. I have given a thorough read to docs. I know Node.js, have done some projects on it. Can anyone guide me, how to contribute to webpack. Some concepts are yet to be consolidated. And can anyone share good resources to understand webpack better.


    I'm a beginner,
    I use webpack 4 on a project view, the command "npm run dev" works normally but when I type the production command "npm run build" it displays an error "Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. "
    help me please

    var path = require('path')
    var webpack = require('webpack')
    const VueLoaderPlugin = require('vue-loader/lib/plugin')

    module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
    module: {
    rules: [
    test: /.css$/,
    use: [
    test: /.scss$/,
    use: [
    test: /.sass$/,
    use: [
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
    loaders: {
    // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
    // the "scss" and "sass" values for the lang attribute to the right configs here.
    // other preprocessors should work out of the box, no loader config like this necessary.
    'scss': [
    'sass': [
    // other vue-loader options go here
    test: /.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
    test: /.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
    name: '[name].[ext]?[hash]'
    { test: /.(eot|woff|woff2|svg|ttf)([\?]?.)$/, loader: "file-loader" },
    resolve: {
    alias: {
    'vue$': 'vue/dist/vue.esm.js'
    extensions: ['
    ', '.js', '.vue', '.json']
    devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
    performance: {
    hints: false
    plugins: [
    new VueLoaderPlugin(),
    devtool: '#eval-source-map'

    if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
    'process.env': {
    NODE_ENV: '"production"'
    new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,
    compress: {
    warnings: false
    new webpack.LoaderOptionsPlugin({
    minimize: true



    I've been currently struggling with using a custom package I have made in a React project of mine. The custom package uses babel and webpack in order to transpile, bundle, and minify my code which outputs in a directories like so:


    The value I'm using for main in package.json is dist/js/main.js which is the output file that results from the root index.js entry that exports all of my modules. The runtime error I've been receiving from the main project is Uncaught Invariant Violation which leads me to believe that the custom package is using the wrong output file from webpack. Does anyone have any idea what output file I should be using for my custom module's main field in package.json to get this all working?

    I am new to webpack. I have a doubt. I do have situation where i dont want the build to be run when we click button from 'Xcode' IDE not to npm run build. how can i achieve this?
    vitaly menchikovsky
    hi all I am trying to build with react but getting an error on build when using jsx
    Hi All I will be needing some assitance.
    Is this the chat for contributors?
    Dhruvi Butti
    Hey! I am new to webpack and I want to contribute. But I am a little overwhelmed. Can anyone help me with how and where can I start?
    James Drawneek
    Does anyone know how to get into webpack at runtime? I'm trying to access the dependency map .
    Matheus Gonçalves da Silva
    Which hook could i attach to, in order to get the source code of the files being processed by webpack? before loaders
    Anurag Akella
    Hello! Is this the right place for GSoC questions?
    hello guys, i am using webpack for my node project and am getting this error
    and this is my config file
    can someone please help me
    Brian Schlenker
    Is it possible for a webpack plugin to add dev server middleware? Or can that only be done manually with devServer.before?
    barak igal

    Hey is someone knows why new URL('./asset.png', import.meta.url) is not tree shakable? it cause two unwanted behaviors.

    1. the assets modules dose not being remove from chunk
    2. the new URL expression is not being removed

    Assume the issuer module is not in use.

    Vitalik Chernyi


    The main project has the same error.
    Made a test version and nothing changed.

    I noticed that the main.js file is generated when the server starts, although the entry point has a different name.

    PS: main.js is only created when the npx webpack server is started. in normal assembly, filenames will be named relative to the enter parameter.

    Vitalik Chernyi
    I was already helped to solve the problem. webpack/webpack-dev-server#2865
    Darrel O'Pry
    hello... I'm working on the electron-forge webpack plugin... Currently it sets up a custom express server using webpack-hot-middleware and webpack-dev-middleware, mostly in order to hijack the logging. I've been discussing with the maintainer moving away from this approach to use just webpack-dev-server directly. Is there a good way to replace the logger for webpack dev server?
    I suspect I am going to pass in a compiler and that I should use compiler.getInfrastructureLogger('webpack-dev-server') and just replace the log methods with new ones bound to our logger...
    Does that seem reasonable?
    Mo Moadeli
    hi all. I'm exploring micro-frontend architectures and focusing on webpack 5's module federation (especially with Angular 12)...I have a good feel for what's what but I'm struggling with the issue of CORS. If various apps, modules, and components are built on different sub/domains (different origins), how can these 'remotes' be assembled within a 'host'/shell without running into CORS restrictions? I don't see any reference to this in webpack docs at least from/a module federation perspective. Thoughts?