Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 02:25
    webpack-bot labeled #14308
  • 02:03

    dependabot[bot] on npm_and_yarn

    chore(deps): bump browserslist … (compare)

  • 02:03

    dependabot[bot] on npm_and_yarn

    (compare)

  • 02:03
    webpack-bot labeled #14308
  • 02:03
    dependabot[bot] closed #14146
  • 02:03
    dependabot[bot] labeled #14308
  • 02:03
    dependabot[bot] opened #14308
  • Sep 22 13:38
    sokra edited #14306
  • Sep 22 13:37
    sokra synchronize #14306
  • Sep 22 13:37

    sokra on hashing

    allow to configure all hash fun… (compare)

  • Sep 22 13:33
    sokra synchronize #14306
  • Sep 22 13:33

    sokra on hashing

    update builtHttp example for ch… (compare)

  • Sep 22 13:02
    webpack-bot labeled #14306
  • Sep 22 12:41
    webpack-bot labeled #14306
  • Sep 22 12:41
    sokra opened #14306
  • Sep 22 12:41

    sokra on hashing

    allow to configure all hash fun… (compare)

  • Sep 22 12:03
    liulangyu90316 synchronize #14035
  • Sep 22 11:41
    webpack-bot labeled #13860
  • Sep 22 11:41
    webpack-bot unlabeled #13860
  • Sep 22 03:24
    webpack-bot labeled #14301
livrang
@livrang
hi
shoaibmuhammad2003
@shoaibmuhammad2003
Best single project to get grip on Vue js
Tanuki
@IMTanuki
Is that a question or a statement?
Joe Gornick
@jgornick

Hey folks, do I need to include anything in webpack 5.x for yarn PnP support?

Bump :)

Shobhit Srivastava
@shobhit_srvstv_twitter
Hey, I'm working on a vue project where I have the login and rest of the app being rendered separately. With webpack, this behavior creates kind of an entry chunk which imports js based on what's being rendered. Any way I can split chunks in webpack based on App/Login?
Specifically don't want chunks to import other chunks
1 reply
I'm on webpack4 ^
Danila Nagornyi
@DanilaNagornyi
Снимок экрана 2021-09-02 в 17.05.41.png
Снимок экрана 2021-09-02 в 17.15.59.png

Hi !

We go from 4 to 5 webpacks, everything seems to work out, but there is a problem with the code splitting, namely with the packages of antd screens I attach the file next.config.js

Webpack 4:
img - 1

Webpack 5:
img - 2

Can you please tell me how to make the formation of packages as it was before, so that the webpack does not drag everything into one file _app.js ?

My config:
```const path = require('path');
const webpack = require('webpack');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const { withSentryConfig } = require('@sentry/nextjs');
const withAntdLess = require('next-plugin-antd-less');

let CONFIG;

try {
CONFIG = require('./etc/config');
} catch (e) {
console.error(
'Create config from one of examples. See /etc/ dir and copy one of .dev, .test or .prod config file for config.js!',
);
throw new Error(e);
}

const SentryWebpackPluginOptions = {
dryRun: true,
};

const themeVariables = require('./src/.......').antDLessVars;

const config = withSentryConfig(
withBundleAnalyzer(
withAntdLess({
typescript: {
ignoreBuildErrors: true,
},

  productionBrowserSourceMaps: false,
  trailingSlash: true,
  serverRuntimeConfig: CONFIG.SSR,
  publicRuntimeConfig: CONFIG.CLIENT,

  modifyVars: themeVariables,
  webpack: (config, { isServer, buildId }) => {
    config.plugins.push(
      new webpack.DefinePlugin({
        'process.env.SENTRY_RELEASE': JSON.stringify(buildId),
        'process.env.IS_CLIENT': JSON.stringify(!isServer),
        'process.env.IS_SERVER': JSON.stringify(isServer),
        'process.env.IS_DEV': JSON.stringify(process.env.NODE_ENV),
        'process.env.IS_DOCKER': JSON.stringify(process.env.IS_DOCKER),
      }),
      // new AntdDayjsWebpackPlugin(),
      new FilterWarningsPlugin({
        exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
      }),
    );

    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    } else {
      config.plugins.push(new webpack.IgnorePlugin(/^(elastic-apm-node)$/));
    }

    config.resolve.alias['@ant-design/icons/lib/dist$'] = path.join(__dirname, 'icons.js');

    config.module.rules.unshift({
      test: /\.svg$/,
      use: ['@svgr/webpack', 'url-loader'],
    });

    return config;
  },
}),

),
SentryWebpackPluginOptions,
);
module.exports = config;
```

Perry Olsson
@Perry-Olsson

I was looking through some custom Webpack module rules and came across this:

 module.exports = {
...config,
module: {
rules: [
{
  test: /\.(png|jpg|jpeg|gif|webp|ico|bmp|svg)$/i,
  loader: 'next-image-loader',
  issuer: {  not: cssRegexp },
  dependency: { not: ['url'] },
  options: { ...someOptions }
}
]
}

I can't find any documentation on what exactly the dependency field is used for.

Bunty
@BuntyBru
image.png
has anyone faced this issue
module.exports = {
  mode: "development",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },

  devtool: "source-map",
  devServer: {
    contentBase: "./dist"
  },
};
tried using webpack-dev-server
and getting this
bodqhrohro
@bodqhrohro:matrix.org
[m]
Is Webpack watcher supposed to get stuck on ENOENT and ignore the file even when it appeared again?
coultonluke
@coultonluke
Question: Does webpack runtime chunk need to be loaded first, last or any order?
When configured for runtimechunk: 'single', it seems to work whether modules are loaded onto the page before the runtime chunk or not, but I would like to know what is the supported chunk order or whether it doesn't actually matter...
Silviu BURCEA
@silviuburceadev
is webpack 5 considered production ready, i.e. stable and similar speed/performance to webpack 4? I don't care about fancy features, just basic bundler and code splitting.
Seif Eddine Slimene
@SeifESlimene

Hello, I use expose-loader plugin.

{test: require.resolve('jquery'), loader: 'expose-loader?$!expose-loader?jQuery'},

My first question is:
Do I need to include Jquery in my bundle like this?

entry: {
    vendor: [
       'jquery',
    ]
}

In the documentation (here https://webpack.js.org/loaders/expose-loader/), they said:
The require.resolve call is a Node.js function (unrelated to require.resolve in webpack processing). require.resolve gives you the absolute path to the module ("/.../app/node_modules/jquery/dist/jquery.js"). So the expose only applies to the jquery module. And it's only exposed when used in the bundle.

But I don't understand the part when they said:
So the expose only applies to the jquery module. And it's only exposed when used in the bundle.
So my second question is:
What did they mean by this?

Robert Wildling
@rowild
Is there anybody out there who has a working web pack 5 setup, where hot reload works, when working with ejs files (including nested partials)??? There are so many people out there facing the problem that webpack does not hot-reload, but no nswer nowhere! Webpack peopls: can you PLEASE provide a solution at least for the standard ejs templating language? Write a good documentation on that topic.
Here is the roblem description (where there is no reaction from you webpack developers, even though you say users shall post there; and that is true for sooo many posts abot the same topic: hot reload!), a repo and a codesandbox to play around with: https://stackoverflow.com/questions/69058169/webpack5-html-templates-with-partials-not-working-with-npm-run-dev
PLEASE PROVIDE A SOLUTION!!!
Łukasz Byjoś
@Mistic92
Are there any consultations with some Webpack experts? We have unusal "issue" which would require a bit more explanation before digging into the problem.
aashishkot
@aashishkot
need webpack expert comments: facing issue with image file name in CSS file. Also, generate duplicate image file names(0fd53c01639d78d37518.jpeg.jpeg) in dist.

`const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {

entry: "./src/app.js",
mode: 'production',
output: {
    filename: 'js/bundle.js',
    path: path.join(__dirname, 'dist'),
    clean: true,
},
plugins: [
    new HtmlWebpackPlugin({
        template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
        filename: "css/[name].css",
        //chunkFilename: "[id].css"
    })
],
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: { loader: "babel-loader" }
        },
        {
            test: /\.html$/i,
            use: [
                {
                    loader: "html-loader",
                    options: {
                        minimize: false,
                        sources: false,
                    }
                }
            ]
        },
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "postcss-loader",
                "sass-loader",
            ],
        },
        {
            test: /\.(png|svg|jpe?g|gif)$/i,
            loader: "file-loader",
            options: {
                name: '[name].[ext]',
                outputPath: 'img',
                publicPath: 'img',
            }

        },
        {
            test: /\.html$/i,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        minimize: false,
                        sources: true
                        name: '[name].[ext]',
                    }
                }
            ],
            exclude: path.resolve(__dirname, 'src/index.html')
        },
    ]
},

};`

Manu
@ManuGowda
Hello Webpack team :wave:
we are having a critical issue, which is blocking our release for weeks now, need some assistance
it is related to the usage of node.js process for electron-updater for Auto updater feature and at the same time react needing browser process
we currently have
plugins: [
    new ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
    new webpack.EnvironmentPlugin({
      NACL_FAST: 'disable',
    }),
  ],
so removing process: 'process/browser', helps for electron-updater to get the node.js process where as the react seem to have some issue
any help is much appreciated to resolve the bug to release our product :pray:
Saad Quadri
@saadq

Hi all, does webpack remove global functions or event listeners that are on window in the production build? I have more context + config in my StackOverflow post: https://stackoverflow.com/questions/69126274/does-webpack-remove-custom-variables-or-event-listeners-attached-to-window-in

But the issue I'm running into is that our build works correctly in development but when doing the production build the event listeners that we had attached to window don't seem to be there

Aayush Sharma
@techdiary
hey, I'm stuck for a day with webpack-dev-server setup. If anyone can please guide me with this.
I've setup react from scratch, using django as a web server which redirects to a microservice frontend i.e. this react project. all this setup is done on a ssh box.
So when webpack-dev-server tries to access wss://hostname.com:8081/ws it fails
can any one please help with this.
Xandor Schiefer
@zeorin_gitlab
Hello all :wave: I'm helping out a client that wants to add SSR to their Create React App project. I've ejected from CRA and am currently trying to set up SSR. I would really like for the development setup to also do SSR, not just the production setup. CRA uses webpack 4 and webpack-dev-server. I've been trying to set it up for development mode by hooking into https://v4.webpack.js.org/configuration/dev-server/#devserverafter, but when I set up some middleware using app.use it seems like it's never actually run. When I attach a debugger to Node it stops at all the breakpoints I've set, but not at the one in after → app.use:
    before(app, server) {
      // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
      // middlewares before `redirectServedPath` otherwise will not have any effect
      // This lets us fetch source contents from webpack for the error overlay
      app.use(evalSourceMapMiddleware(server));
      // This lets us open files from the runtime error overlay.
      app.use(errorOverlayMiddleware());

      app.use((req, res, next) => {
        debugger;
        next();
      });

      if (fs.existsSync(paths.proxySetup)) {
        // This registers user provided middleware for proxy reasons
        require(paths.proxySetup)(app);
      }
    },
    after(app, server, compiler) {
      debugger;

      // end with the SSR'ed response
      app.use((req, res, next) => {
        // const { devMiddleware } = res.locals.webpack;
        debugger;
        // const outputFileSystem = devMiddleware.outputFileSystem;
        // const stats = loadableStats(devMiddleware.stats);

        // console.log(JSON.stringify(stats, undefined, 2));

        // TODO require the transpiled ssr entry point
        // TODO feed the stats to the ssr script
        // TODO Get the response and send it

        next();
      });
I'm wondering what that is the case…
KOKOU AFIDEGNON
@afidegnum

hi, i'm having the following webpack config

const path = require('path');
const webpack = require('webpack');
const WrapperPlugin = require('wrapper-webpack-plugin');

module.exports = {
  entry: {
    PathPlannerWorker: './workers/PathPlannerWorker.js',
    Dash: './js/Dash.js'
  },
  devtool: 'eval-source-map',
  plugins: [
    new WrapperPlugin({
      test: /PathPlannerWorker.js/,
      header: 'function dash_initPathPlannerWorker() {',
      footer: '} if (typeof(window) === undefined) dash_initPathPlannerWorker();'
    })
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
};

and I'm having an error of

[webpack-cli] TypeError: compiler.plugin is not a function
    at WrapperPlugin.apply (/home/apps/yawflash/dash/node_modules/wrapper-webpack-plugin/wrapper-webpack-plugin.js:28:11)
    at createCompiler (/home/apps/yawflash/dash/node_modules/webpack/lib/webpack.js:74:12)
    at create (/home/apps/yawflash/dash/node_modules/webpack/lib/webpack.js:127:16)
    at webpack (/home/apps/yawflash/dash/node_modules/webpack/lib/webpack.js:135:47)
    at WebpackCLI.f [as webpack] (/home/apps/yawflash/dash/node_modules/webpack/lib/index.js:55:16)
    at WebpackCLI.createCompiler (/home/apps/yawflash/dash/node_modules/webpack-cli/lib/webpack-cli.js:2093:29)
    at async WebpackCLI.runWebpack (/home/apps/yawflash/dash/node_modules/webpack-cli/lib/webpack-cli.js:2213:20)
    at async Command.<anonymous> (/home/apps/yawflash/dash/node_modules/webpack-cli/lib/webpack-cli.js:850:25)
    at async Promise.all (index 1)
    at async Command.<anonymous> (/home/apps/yawflash/dash/node_modules/webpack-cli/lib/webpack-cli.js:1516:13)

what am I doing wrong?

Seif Eddine Slimene
@SeifESlimene
debug your code
I suggest filing the issue to the wrapper-webpack-plugin repository, the best place where you can get help on this issue
linct
@linct96
image.png
checkout version you used
Joe Gornick
@jgornick

Hey folks! Does anyone know some of the internals for enhanced-resolve? I'm looking for some guidance on how to address an issue with enhanced-resolve + pnp and resolving modules based on the issuer's location: webpack/enhanced-resolve#301

Any help or insight would be greatly appreciated!

Giampiero
@giampierobono
Hello guys, we recently migrated from v4 to v5 and we are facing issues running app within the dev-server. It seems option "public" (or param --public 'myhost.cool.com') cannot be used anymore and I don't find any deprecation either on the doc or on the migration guide or the changelog. Anybody is aware of what's its alternative?
Andy Bayer
@anderoonies
hello!! i'm using the ESLint Webpack Plugin to lint typescript files and i am not seeing any linter errors in the webpack output. i'm initializing it with new ESLintPlugin(), and my eslintrc has:
overrides: [
        {
            files: ['**/*.ts', '**/*.tsx'],
            parser: '@typescript-eslint/parser',
            extends: [
                'eslint:recommended',
                'google',
                'react-app',
                'prettier',
                'plugin:prettier/recommended',
                'plugin:@typescript-eslint/recommended',
            ],
            plugins: ['prettier', '@typescript-eslint'],
            rules: {
                'require-jsdoc': 'off',
                'prefer-const': 0,
                'new-cap': 0,
                '@typescript-eslint/no-explicit-any': 0,
            },
        },
    ],
Subroto
@phoenisx

Hi

I have recently upgraded to webpack v5

If I use a custom script to build src using webpack APIs, the build succeeds, but when I directly use webpack --config ... cmd /npm script, it quits before it completes the build. What might I be doing wrong here?

Subroto
@phoenisx
Got the issue, it was due to having multiple entry points in webpack 5, not sure why it was affecting the build though
Thomas Anagrius
@anagrius

Hey, I am trying to write loader that detects required assets using a special syntax, "require:xyz.svg". Previously I would find the require statements, replace them with a require('xyz.svg') and let webpack handle the loading of the module.

Unfortunatly that will no longer work, because the resulting JS file is very large ca. 15MB, and to be performant we have to add noParse to the file or it doubles out compile time on each incremental build. Because of noParse the require('xyz.svg') we used to output would not be picked up and replaced.

Therefor I would like to have my loader apply loaders to the required resources (currently with this.loadModule()), and manually insert the produced __webpack_require__(module.id) into the resulting JS.

But it seams that this.loadModule does not make the resulting module part of the bundle, and while i produce valid JS, the modules cannot be found at runtime.

Is it even possible to add modules to the bundle from a loader, or am I going about this all wrong?

shicheng wang
@wscfe
webpack devServer config is not valid, because contentBase attibution reppalce static ,that is ok
summywong-developer
@summywong-developer
Hi, everyone. I am currently helping client to create CSS flipped box with hover effect and number count. However, i have no ideas of editing the height and weight of the box which i created. Even i don't know how to change the image in each photo. Please refer to the link https://codepen.io/cojdev/pen/EQZVRN
And see if anyone could help.
Thank you very much.