webpack/webpack

For questions please post on Stack Overflow and use the 'webpack' tag (http://stackoverflow.com/tags/webpack).

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:

https://webpack.js.org/configuration/node
---- but it doesn't seem process is in the list, had to enable global, but it's unrelated

Evilebot Tnawi

@evilebottnawi

process is Node.js module, you need polyfill it if you use it in browser

Olzhas Alexandrov

@o-alexandrov

Possibly, installing: https://www.npmjs.com/package/process

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:

jantimon/favicons-webpack-plugin#227
unfortunately, we had to temporarily disable PWA, due to webpack/webpack#11425
you'd need a manual postinstall script for now for babel/babel#10853

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!

Where communities thrive

People

Repo info

Activity