Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 18:04
    sokra reopened #11552
  • 18:04
    sokra closed #11552
  • 15:56
    chenxsan synchronize #11565
  • 15:07
    chenxsan edited #11565
  • 13:39
    chenxsan ready_for_review #11566
  • 13:39
    chenxsan edited #11566
  • 13:38
    webpack-bot labeled #11566
  • 13:35
    smelukov review_requested #11561
  • 13:14
    chenxsan edited #11566
  • 13:02
    chenxsan synchronize #11566
  • 12:58
    chenxsan edited #11566
  • 12:56
    webpack-bot labeled #11566
  • 12:56
    chenxsan opened #11566
  • 12:34
    chenxsan synchronize #11565
  • 12:15
    chenxsan synchronize #11565
  • 11:11
    chenxsan synchronize #11565
  • 11:01
    chenxsan edited #11565
  • 10:55
    webpack-bot unlabeled #11565
  • 10:55
    webpack-bot labeled #11565
  • 10:55
    chenxsan synchronize #11565
Schalk Neethling
@schalkneethling
Hey folks!
So, I have a super simple use of webpack where my main reason is to be able to use sass-loader to resolve imports in sass that is in the form @scope/package/f/foo.scss
Things is, in the origin project I can for some reason not reference fonts using a relative path like say ../../typography/w.woff but need to instead do /typeography/w.woff
This is problematic because, this same SASS package is published as an NPM module and then used in a React app that uses create-react-app and there /typography/.. style fails :(
Is there a way to tell Webpack to allow referencing the font files via relative paths?
I have a suspicion it has something to do with module resolution, but not sure
Evilebot Tnawi
@evilebottnawi
Package should have variables to assets path, you can specify it
or you can use alias if it is no possible
Schalk Neethling
@schalkneethling
@evilebottnawi where in the config file would I provide the assets path?
My concern with alias is that those same alias won;t be available/configured when the module is used in other apps that uses create-react-app
Schalk Neethling
@schalkneethling
So, I reckon here is my problem. From the sass-loader docs "Since Sass implementations don't provide url rewriting, all linked assets must be relative to the output."
but also:
Thankfully there are a two solutions to this problem:
Add the missing url rewriting using the resolve-url-loader. Place it before sass-loader in the loader chain.
Library authors usually provide a variable to modify the asset path. bootstrap-sass for example has an $icon-font-path.
Schalk Neethling
@schalkneethling
I thought resolve-url-loader would solve my problem but strangely enough it does not :( I get the exact same error
Ok, holy heck, this seems to have done the trick:
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./sass/mdn-minimalist.scss",
  output: {
    path: path.resolve(__dirname, "public", "css"),
  },
  mode: "development",
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "resolve-url-loader",
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2)$/,
        use: "file-loader",
      },
    ],
  },
};
Adrian Mui
@adrianmui
hey guys, i'm super stuck. I'm trying to leave specific file types out of my webpack bundle (ie: .boomboom.tsx or .boomboom.ts). In fact, I don't even want wp to look at them. how do i do that?
also, i was wondering if there was a way to mock specific module imports. (ie: import {} from 'boomboomDoesNotExist'), and i don't want my wp showing errors because it was never installed
LukasOchmann
@LukasOchmann
I guess you need something like this: https://webpack.js.org/configuration/externals/ ?
Lucas Åström
@Jinxit
is there a way to pass a first-class function as an entrypoint to webpack? I'm open to a decent amount of black magic
DhairyaBahl
@DhairyaBahl
Hello Everyone. I am a newbie in front end development and want to learn Javascript so that i can contribute to the open source projects but the problem is i dont know how much knowledge of html and css is required. Can anybody help me on this ?
Dimitrii
@DimaIpatii
Hi, people! I am trying to copy an image folder from './scr/img' to './dist/img' using CopyWebpackPlugin, and it works fine with 'webpack-dev-server', but when I upload the files from './dir' folder to the live-server everything works well except images. As images I use the svg sprite icons from 'IcoMoon's'. Thanks a lot.)
Olzhas Alexandrov
@o-alexandrov
Hello, trying out webpack 5 and stumbled upon an issue that I couldn't google :sweat_smile:
Have you seen process is not defined issue with webpack 5?
I thought it's related to the node changes:
Evilebot Tnawi
@evilebottnawi
process is Node.js module, you need polyfill it if you use it in browser
Olzhas Alexandrov
@o-alexandrov
I see, hah, asked and realized also :D
Evilebot Tnawi
@evilebottnawi
Yep, but I recommend to rewrite code from process and open an issue in the repo where you faced with this for browser support
Olzhas Alexandrov
@o-alexandrov
I was going to ask you to kindly share your view as I also saw the use of process in browser as possibly dead code that wasn't properly handled by terser.
  • but you did it anyway :D
    Thank you very much :pray:
Evilebot Tnawi
@evilebottnawi
Based on code
Olzhas Alexandrov
@o-alexandrov

Btw, anyone who wants to use webpack 5 with react, you can go ahead and do so.
We are using webpack 5 with preact and other modern libraries like framer-motion, date-fns, react-use, etc. and had no major issues with upgrading from webpack 4.
A couple of other issues I had were with:

But these are very minor issues.
Thank you very much for webpack 5! Congratulations :tada:

Evilebot Tnawi
@evilebottnawi
For babel we need wait https://github.com/babel/babel/milestone/45, it is bug on their size, we can't fix it, only workarounds
Olzhas Alexandrov
@o-alexandrov
Yes, totally understandable, just mentioned that for other users like me who might stumble upon this issue
Evilebot Tnawi
@evilebottnawi
Here webpack/webpack#11425 only warnings, it is not bad, they can fix it in future, nothing is broken
Olzhas Alexandrov
@o-alexandrov
Unfortunately, workbox-webpack-plugin is unusable with webpack 5 yet. GoogleChrome/workbox#2630
I mentioned the issue in webpack repo, because the maintainer in workbox repo indicated he expects a resolution on webpack/webpack#11425 so he can complete compatibility with webpack v5
I understand devs don't have to use workbox to build PWAs, but I believe workbox is probably the most reasonable way :)
AJGraham23
@AJGraham23
Hi , how do i enable devServer option for updating project each time i edit the webpack.config file? i can't find any option for this matter
Benjamin Solum
@soluml

Hey all,

I'm fairly new to building Webpack Loaders and was looking for an answer to a problem I'm having. I have a static path with an alias in it. How can I transform that alias to the appropriate path?

For example, let's say @ is mapped to ./src/ in the Webpack config under resolve.alias. In my custom loader, how could I transform this: @/js/components into: ./src/js/components? Is there some way for me to access the webpack config and a utility that can process this transform for me based on the configuration?

Thanks in advance! I've been searching the docs but haven't been able to come up with anything.

Maxime Chambonnet
@Maxzor_gitlab
Hello, I am trying to develop for wikijs which uses webpack-hot-middleware.
I am not sure this is a webpack question... Can one have the above middleware running to get hot reload, and at the same time launch a debug session to step through node.js code?
Vijay Amin
@vijayamin83

Hello All,

I would like to run my electronJS desktop application (Build on React) to the web browser. I had checked that I can do this with web pack-dev-server but when I run this command, it show me the error

ERROR in Entry module not found: Error: Can't resolve './src'

How I can sort out this?

Thanks in Advance.

Owen
@owenfar
Hi community :) Does anyone here know how I can change a PHP value when running Webpack in production mode? I have a global and would like to change the value from true to false when I run Webpack. I tried many ways especially using the HtmlWebpackPlugin, and cannot find anything related on the internet. Your help would be much appreciated
Junhao "Jerry" Zhang
@cursorweb
Hi!
Is there a way to prepend a comment to the output file?
Something like:
/* oooh this is a library (c) 2020 */
!function(e){...
steam
@oakland

Something like:

/* oooh this is a library (c) 2020 */
!function(e){...

Maybe this is what you want. https://webpack.js.org/plugins/banner-plugin/

Owen
@owenfar
@cursorweb In case you use Terser (which is the default JS "minimizer"), you can also preserve these comments. Check the Format options on the docs here: https://github.com/terser/terser#format-options
Danny Fritz
@dannyfritz
I imagine this has been asked a lot, but I'm having trouble searching for the question/answer:
How do I include images in a shared component library that is being bundled with Webpack and consumed by another Webpack build process?
Actually, I'm starting to think it isn't a Webpack problem when I think about it. And I just need to get them to S3 and hardcode URL's in the shared library.
Faizal Vasaya
@faiztherocker

Dear Contributors,
Which version of webpack dev server is compatible with webpack 5.0.0-rc.2

Currently I am getting the below mentioned error when I run webpack dev server.

`Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:

  • /Users/faizal.vasaya/UIE Studio/Web Solutions Practice/ui-orbit-root/root-config/node_modules/webpack-dev-server/bin/webpack-dev-server.js`
Ivan Demidov
@Scrum

Hi all

How to disable parallel processing entry what would they be processed sequentially?

Perhaps there is another way to indicate the dependency entry from another entry?

as an example I have

{'A': 'A-path'},
{'B': 'B-path'}

I need B to start getting ready after the end of A

fpezzati
@fpezzati
Hello everyone I am new to webpack and I am asking for some help. I am playing with webpack-dev-server serving a small front-end application that runs in a node container (localhost:9000).
Switching to a docker-compose scenario, the same app is running behind an nginx (localhost:8000). Everything looks fine here too but, I see the sockjs-node cliemt doing
requests and getting back CONNECTION REFUSED errors.
It looks like sockjs-node client tries to connect to server by using the same url as it was served in a single container scenario: it calls localhost:9000/... so nginx isn't able to forward requests to webpack-dev-server..
I searched a lot but no luck. I'd like to run my app as single container and behind nginx, how to solve my issue? Thanks in advance!