Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 14 04:19
    webpack-bot labeled #13383
  • May 14 03:07
    webpack-bot labeled #13385
  • May 14 02:45
    webpack-bot labeled #13384
  • May 14 02:03
    webpack-bot labeled #13385
  • May 14 02:03
    dependabot[bot] labeled #13385
  • May 14 02:03
    dependabot[bot] opened #13385
  • May 14 02:03

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump fork-ts-c… (compare)

  • May 14 02:02
    webpack-bot labeled #13374
  • May 14 02:02
    webpack-bot labeled #13384
  • May 14 02:02

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump less-load… (compare)

  • May 14 02:02

    dependabot[bot] on npm_and_yarn

    chore(deps-dev): bump simple-gi… (compare)

  • May 14 02:02
    dependabot[bot] labeled #13384
  • May 14 02:02
    dependabot[bot] opened #13384
  • May 14 02:02
    webpack-bot labeled #13383
  • May 14 02:02
    dependabot[bot] labeled #13383
  • May 14 02:02
    dependabot[bot] opened #13383
  • May 13 09:47
    webpack-bot synchronize #7075
  • May 13 09:47

    webpack-bot on master

    chore(deps-dev): bump @types/no… Merge pull request #13376 from … (compare)

  • May 13 09:47

    webpack-bot on npm_and_yarn

    (compare)

  • May 13 09:47
    webpack-bot closed #13376
James Bromwell
@thw0rted
You do still need the package but it has to be 4.x
which... is still in beta!
:(
Olga Grabek
@Olgagr
Hi, I am using html-loader and I want to load a custom template in my main template file but I need the path to be dynamic. Basically, I want to do something like that: <%= require('html!' + path) %> where path is a variable. Is it possible to do?
I tried something like that: <% var path = '../clients/dum-ksa/assets/partial/test.html' %> <%= require('html!' + path) %>
But I get an error: ERROR in Template execution failed: Error: Cannot find module "."
Olga Grabek
@Olgagr
To be more precise: I want the path to come from my webpack config file
rjbudzynski
@rjbudzynski
@thw0rted for yet more confusion, I misspelled the filename webpack.config.js, and the resulting error messages were rather misleading. Now I'm up and running (so it seems) with webpack 4. Anyway, the tutorial I was following is outdated, not webpack's fault.
James Bromwell
@thw0rted
Olga, maybe resolve.alias will get you what you're looking for? In your config, you could say e.g. resolve: { alias: { MyTemplate: isTest ? "test-template.html" : "real-template.html" } }, then just require("MyTemplate") in your index.html
I haven't tried it but I think it would work
Curt Siffert
@tunesmith
Using NextJS 10's default webpack5 support. When deploying to prod, which has 4 servers, we are noticing that the chunk names are identical for servers 1 and 3, and also for 2 and 4, but are different between 1 and 2; and 3 and 4. Any ideas? Same deployment script, same git commit being deployed, content of chunk files is the same. Only other difference I've noticed so far is that the ip subnet for 2 and 4 is different than for 1 and 3.
Curt Siffert
@tunesmith
I've since determined it's definitely not the subnet/az that matters. So it's deterministic, since it's the same across different servers, but apparently depending on something that is different from server to server.
Olga Grabek
@Olgagr
@thw0rted Thank you! Actually, I didn't realise that I can pass HTML string as a configuration of HtmlWebpackPlugin, eg: new HtmlWebpackPlugin({snippet: '<h1>Test</h1>'}). So I just read the file in my webpack.config and then use it in the template htmlWebpackPlugin.options.snippet. For me this is good enough
Michael de Silva
@bsodmike

:point_up: May 4, 2021 4:31 PM
Small correction to the code posted in my previous post, it should use the full path; relative paths do not seem to work:

const customConfig = {
  plugins: [
    new ExtraWatchWebpackPlugin({
      dirs: [ '/<FULL_PATH>/MyCustomPackage' ],
    }),
  ],
}

HI all, so I have a codebase where I've got an external module loaded via yarn add file:<path>/MyCustomPackage, but the development experience of this package is pretty horrible. How can I get webpack to update its code whenever changes are made to MyCustomPackage? At the moment the only solution is to rerun the yarn command and restart the webpack dev-server (for a recompile).

cc: @DavidArchibald

Joe Gornick
@jgornick

Hey folks, I've always been a bit confused between a "per method package" (https://lodash.com/per-method-packages) vs an ES module. Is there a benefit to one or the other?

I guess I'm wondering is if my library distributes an ES Module as a single file but with named exports, when webpack is bundling, does it bundle the entire ES Module file, or does it only pull out the specific bits of code imported?

Kevin Ghadyani
@Sawtaytoes
Where did all the options go in the latest webpack-dev-server@4.0.0-beta3?

I removed everything thinking I was good, then I noticed disableHostCheck is no longer a thing. When removing it, I get "Invalid host header" errors.

I'm using module federation and Fast Refresh, but no remotes, only shared packages. It should be a valid use case, but I figured all fixes were in the latest webpack-dev-server.

So I have 2 issues:

  1. I cannot use the latest webpack-dev-server.
  2. I am running muliple entrypoints on the same page with HMR and React Fast Refresh.

HMR is having issues; although, I don't know what's causing the problem. I get errors when hot updates occur as it's trying to apply those to the last-loaded entrypoint rather than the one where the changes were made.

philipp
@philipp:zoomyboy.de
[m]

Hey folks,

I'm tying to decrease the asset filesize. Therefore I need to show the stats of compiled files every time - even on recompilation - when running webpack-dev-server. However, the preset version "normal" is not applied and it basically hides all the stats when recompiling. How can I fix this?

Ravi Shrestha
@raviSussol
Hi there,
I'm having some issue with configuring webpack for my electron js app. I'm trying to use ffi-napi, ref-napi libraries to integrate native module in the electron js app. The problem I get when setting __dirname to false in node property in the webpack config file. Libraries like above expect an absolute path of the base directory. So when I turn __dirname to true then it works but I get error with my preload.js file not reloaded after the app initializes. So does anybody know how to get around of this issue? I've even posted in the Stackoverflow: https://stackoverflow.com/questions/67397295/how-to-use-other-platform-native-module-other-than-node-addons-in-the-electron
but nobody has yet answered to my question. So any help would really be appreciated. Thanks.
zhiyang
@zhijs
hi~, anyone can help me?

i got this error messgae "Module not found: Error: Can't resolve 'client.js' in '/Users/zhiyang/personal-project/mn-ssr/entry'" when is use "webpack-cli": "^4.7.0" , "webpack": "^4.39.1"

and my entry path is "/Users/zhiyang/personal-project/mn-ssr/entry/client.js"

zhiyang
@zhijs
this seem entry path is right but error message show that can not found client.js in "/Users/zhiyang/personal-project/mn-ssr/entry" path
Ghost
@ghost~609924a46da03739847c427f
Does anyone know if this is still the recommended starting point for creating a new Webpack tool (loader specifically)?
https://github.com/webpack-contrib/webpack-defaults
It currently is broken and not updated for Webpack 5. I can fix those issues, but I wasn't sure if it was worth my time. Esp if there was something else more maintained.
Nico Schlömer
@nschloe

A question about the copy plugin: When using

{ from: './path/to/myfont.woff2', to: 'fonts/' }

it copies -- as expected -- the fir myfont.woff2 into the output fonts/myfind.woff2. When globbing, though,

{ from: './path/to/*.woff2', to: 'fonts/' },

the files end up in fonts/path/to/. Is this a bug? If not, how to prevent it?

3 replies
Dmitry Pishchalka
@dpischalka
Hello collegues.
Could you say, does this chat active?
Ghost
@ghost~609924a46da03739847c427f
seems to be more questions than answers. I'm probably going to bounce soon :-) gitter's access requests to my github is making me frightened.
json
@jcharnley
hi all, am having issues with the WebpackPwaManifest plugin, seems likes the manifest are distrubting into a /auto folder but my cloudfront cannot reach it. Seems a issue noted to webpack 5, so ive followed the advice and using a WebpackPwaManifest alpha version but still doesnt work
10 replies
how come these files are going into a /auto folder, compared to webpack 4 were this works perfectly for me
another problem I have is on local only, a error but cannot seem to figure out what the problem is
Screenshot 2021-05-11 at 18.19.10.png
Screenshot 2021-05-11 at 18.19.05.png
can anyone help ?
Demian
@denik1981
Hi, I have an NPM monorepo that holds several child repos that are related within themselves. Each of them have their own build process and there is a master script that triggers each inner child build script in sequence (on dev and prod). Sometimes I'm working in a subrepo which needs to be rebuild (dev) to test it, and while I would like to use this master script instantly I don't want to generate a new build for the rest of the repos given that the state of the code is the same on them. Does Webpack cache already prevent this by default, or do I have to configure something special? I read that when in "dev" a build is always cached but not in "prod" which is fine for me. Do I have to do something special for "dev"?
Garrett Dawson
@killtheliterate
heya folks — hoping somebody can direct me towards a solution for when webpack running in watch mode does not rebuild changes in node_modules — motivating factor being a npm linked dep, but this seems to be the case for all of node_modules
7 replies
Izhaki
@Izhaki
compilation.failedModule hook: Does anyone have a reproducible case where this will be called?
If there's an issue with a module (say parse issue), succeedModule is called but the module has errors.
Pierre-Antoine Mills
@millsp
Hey everyone, I just noticed that webpack 5 fails when doing a function export instead of the configuration. Is this a breaking change or a bug?
module.exports = () => config
json
@jcharnley
guys why doesnt webpack 5 give me errors in the chrome console
if they do they arent helpful at all
webpack 4 was much better
json
@jcharnley
am a missing a plugin or something
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WorkboxPlugin = require("workbox-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/index.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "CommonWealth Project",
    }),
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: true
    }),
    // new WebpackPwaManifest({
    //   name: "My Progressive Web App",
    //   short_name: "MyPWA",
    //   description: "My awesome Progressive Web App!",
    //   background_color: "#ffffff",
    //   crossorigin: "use-credentials", //can be null, use-credentials or anonymous
    //   icons: [
    //     // {
    //     //   src: path.resolve('src/assets/icon.png'),
    //     //   sizes: [96, 128, 192, 256, 384, 512] // multiple sizes
    //     // },
    //     // {
    //     //   src: path.resolve('src/assets/large-icon.png'),
    //     //   size: '1024x1024' // you can also use the specifications pattern
    //     // },
    //     // {
    //     //   src: path.resolve('src/assets/maskable-icon.png'),
    //     //   size: '1024x1024',
    //     //   purpose: 'maskable'
    //     // }
    //   ]
    // })
  ],
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist"
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.(s[ac]ss|css)$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              // Prefer `dart-sass`
              implementation: require("sass")
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: {
              minimize: true
            }
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "[name].[ext]",
            outputPath: "icons/"
          }
        }
      },
      {
        test: /\.csv$/,
        loader: 'csv-loader',
        options: {
          dynamicTyping: true,
          header: true,
          skipEmptyLines: true
        }
      }
    ]
  }
};
Bernhard Posselt
@BernhardPosselt
hi, I've got a single index.html file and I want that one to show up in dist/ as well which is on gitignore; how do you do this? do you explicitly need the copywebpack plugin or can this be done by something built in?
Leonardo Romor
@lromor
Hi, I have a very annoying problem with webpack-dev-server. It seems whatever I do, it keeps watching the WHOLE filesystem from the root folder "/".
The documentation states that the default context should be the current folder, and webpack-dev-server should watch only for files inside that folder.
What I observe is quite different.
(I'm using the webpack serve command, and the devServer configuration field is set to exclude node_modules from being watched)
Any ideas?
Leonardo Romor
@lromor

It's extremely simple to reproduce by my side.

{
  "devDependencies": {
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

just install the two packages and run npx webpack serve I get ENOSPC until the root folder.

Harminder Virk
@thetutlage

I am running a backend application on https and the webpack dev server separately on HTTP.

The webpack dev server client attempts to make a websocket connection with the dev server on wss, since the host is on https.

So, is there anyway to force the client to always use ws?