Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jul 26 07:15
    bebraw commented #347
  • Jul 26 07:12

    bebraw on dev

    chore: Bump book version 3.0.10 (compare)

  • Jul 26 07:11

    bebraw on v3.0.10

    (compare)

  • Jul 26 07:11

    bebraw on master

    fix: Adjust nodemon matching chore: Add a section about Vite chore: Add Statoscope and 10 more (compare)

  • Jul 26 07:08

    bebraw on dev

    chore: Adjust page breaks (compare)

  • Jul 26 07:00

    bebraw on dev

    fix: Adjust nodemon matching chore: Add a section about Vite chore: Add Statoscope and 7 more (compare)

  • Jul 26 06:22

    dependabot[bot] on npm_and_yarn

    (compare)

  • Jul 26 06:22
    dependabot[bot] commented #350
  • Jul 26 06:22

    dependabot[bot] on npm_and_yarn

    (compare)

  • Jul 26 06:22
    bebraw closed #350
  • Jul 26 06:22
    dependabot[bot] commented #349
  • Jul 26 06:22
    bebraw closed #349
  • Jul 26 04:31
    rjvim commented #347
  • Jul 15 06:35

    bebraw on dev

    fix: Fix a typo chore: Bump version 3.0.9 (compare)

  • Jul 15 06:34

    bebraw on v3.0.9

    (compare)

  • Jul 15 06:34

    bebraw on master

    fix: Fix a typo chore: Bump version 3.0.9 (compare)

  • Mar 22 07:39

    bebraw on dev

    fix: Fix port parsing 3.0.8 (compare)

  • Mar 22 07:39

    bebraw on v3.0.8

    (compare)

  • Mar 22 07:39

    bebraw on master

    fix: Fix port parsing 3.0.8 (compare)

  • Mar 22 07:28
    dependabot[bot] labeled #350
Juho Vepsäläinen
@bebraw
one interesting movement is happening on the language side. the js tools of the future aren't written in js anymore
swc is a great example of that
it's already displacing babel in some contexts
esbuild (go) is another good example
swc is built with rust and deno also leverages it a lot
https://vitejs.dev/ is interesting btw. it's a rollup distribution more or less
Ryan Stegmann
@rstegg
what are the benefits of improving upon webpack?
all i can really think of is build speed
Juho Vepsäläinen
@bebraw
build speed is an obvious thing, yeah - you can be looking at a magnitude or two of improvement there
also simpler architecture - in its own way webpack is bloated and it can be difficult to work with when you want to do something more custom
Ryan Stegmann
@rstegg
:+1:
NickWoodward
@NickWoodward
Hi @bebraw, just wondered if you've ever used image-webpack-loader? It seems to be compressing the hell out of a background image I manually put a filter on, but I can't see how to exclude the file
Pretty sure I've seen at least one image loader that can do this, but with my skills I don't really want to start messing with my webpack set up too much XD
(I'd rather fix my parallax problem that's making a css gradient not work properly...)
Juho Vepsäläinen
@bebraw
@NickWoodward no but exclusion might be doable through webpack config
my preferred solution for handling images is to push it to some service (cloudinary, imgix, etc.) as doing image manipulations during compilation can feel wasteful
with an image api they can do everything for you (resizing, quality, and so on)
NickWoodward
@NickWoodward

Ah interesting, I hadn't really considered doing that. Might be the way forward given I can't even really remember which loader is deals with images when they're urls in the css (assume it's my url-loader). It's kind of my problem with webpack, I just deal with it so infrequently that it never quite sticks XD

I guess I actually am getting better at it, just real slowly :D

Thanks for the advice!

Euripides Georgantzos
@frexos

Hi everyone, I am trying to configure copy-webpack-plugin in order to use it with feature flags and create per-customer-builds.
the issue is that when I run build I get this error

[webpack-cli] HookWebpackError: Invalid host defined options
at makeWebpackError (/home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/HookWebpackError.js:49:9)
at /home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:2495:12
at eval (eval at create (/home/egeo/Source/coreon-chrome-plugin/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:38:1)
at /home/egeo/Source/coreon-chrome-plugin/node_modules/webpack/lib/Compilation.js:457:26
at /home/egeo/Source/coreon-chrome-plugin/node_modules/copy-webpack-plugin/dist/index.js:485:13
at processTicksAndRejections (internal/process/task_queues.js:97:5)
-- inner error --

Would this error seem familiar to anyone?

I am using webpack 5 and this is my config file

const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require("copy-webpack-plugin");
const path = require('path');

module.exports = (env) => [
  {
    mode: 'production',
    entry: './js/background.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/',
      filename: 'background.js',
    },
  },
  {
    mode: 'production',
    entry: {
      './js/login': './js/login.js',
      './js/search': './js/search.js',
      './js/options': './js/options.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
      publicPath: '/',
    },
    module: {
      rules: [
        {
          test: /\.(scss|css)$/,
          use: [MiniCssExtractPlugin.loader, "css-loader",
            {
              loader: "sass-loader",
            }
          ]
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'styles/images/[hash][ext][query]'
          }
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'styles/[hash][ext][query]'
          }
        },
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        BUILD_FOR: JSON.stringify(env.custom)
      }),
      new MiniCssExtractPlugin({
        filename: ({ chunk }) => `${chunk.name.replace('/js/', '/styles/')}.css`,
      }),
      new CopyPlugin({
        patterns: [
          {
            from: '/extension-icons/*',
            to: 'dist/extension-icons'
          }
        ],
      }),
    ],
  }
];
Thank you in advance for your time
Juho Vepsäläinen
@bebraw
@frexos it's worth checking /home/egeo/Source/coreon-chrome-plugin/node_modules/copy-webpack-plugin/dist/index.js:485:13 . i think investigating that line might give a better idea
@frexos also make sure you are using the most recent version of copy-webpack-plugin as i imagine they've had to adapt to webpack 5 somehow
one option might be to solve copying as a post-process outside of webpack
Euripides Georgantzos
@frexos
@bebraw Thank you, I have checked version compatibility (webpack-5, copy-webpack-plugin-10, node-12+).
I will try to investigate the plugin code.
Juho Vepsäläinen
@bebraw
@frexos i can also have a quick look if you can reduce it to a small repository
Euripides Georgantzos
@frexos
Thank you for your help,
It seems that the issue appears while the plugin is trying to import a dependency named "globby" :
if (typeof globby === "undefined") {
          try {
            ({
              globby
            } = await import("globby"));
          } catch (error) {
            callback(error);
            return;
          }
        }
Juho Vepsäläinen
@bebraw
@frexos since copy-webpack-plugin 10 is six days old, i wonder if you hit some bug in it. i would try the previous major version
Euripides Georgantzos
@frexos
@bebraw
Your advice was critical for success:
Reverted to copy-webpack-plugin@9.0.1
everything works like a charm
Again, thanks for your time
Juho Vepsäläinen
@bebraw
@frexos cool. if you can reduce the crash and make a repo out of it, i'm sure they'll fix the issue in case you report it :+1:
Euripides Georgantzos
@frexos
@bebraw you are right, I will file an issue. Just for the record, I implemented a simple test case (no other modules) just with webpack 5 and copy-webpack-plugin@10, and it works. I therefore suspect that it was something with my specific project/configuration/module combination.
Juho Vepsäläinen
@bebraw
yeah, it sounds like they are missing handling for some corner case perhaps
Handfish
@Handfish

Hey guys.

I stumbled upon an interesting technical problem the other day and I think a custom webpack plugin is the solution. I'm going to try my best to explain my problem and thoughts so bare with me.

I've recently decided I want to fork an active-life Typescript / React project and make significant changes / build a library / framework on top of the original source. I intend to keep this project in a different repository since it's purpose divulges from the original repository's intentions. My main concern tackling building a fork like this is to make pulling upstream changes as easy as possible.
I watched this video presentation given posted by the team behind Git Swarm about extending Third Open Source Projects. https://www.perforce.com/webinars/extending-open-source-projects
They took git lab, forked it and extended it in a manner I'd like to emulate. They communicate their goal is to touch as few files in original source as possible to make merges as painless as can be. In their presentation they talk about Ruby Modules and their use of "Prepend", which allows them to Extend the modules in-place and have their newly extended modules swap into the original's place in the project.
Presently, I'm unsure if there is a comparable way to do what they've done utilizing just the features of Typescript. Not being a Typescript expert, I can't say for certain. I do believe though that building an extension for Webpack may allow me to have the most pain-free development experience when developing a modified fork of an active-life product.
Here is the pattern I have in mind:
First I want to create a subdirectory (you can call it extended_app) in the main repo's src directory. In that subdirectory, I will create the exact folder / file structure of the src directory. The files of the subdirectory will import / export all of their respective src directory exports - think of it as an acting HEAD in my filesystem. If I need to override something, I can do it in the subdirectory without touching the original source.
I'd like to take the NormalModuleReplacementPlugin and configure it so that it remaps the src directory to my subdirectory. The problem with the current NormalModuleReplacementPlugin is that it applies to the entire project. I'd like it to remap all occurrences of an import to my subdirectory UNLESS the file it is passing over is within my subdirectory - then I would like to reference its original module location.
The concept I have is as follows:
Let's say the repo I'm extending consists of two files:
src/foo
   import { d } from "./bar"

   export const a = "a";
   export const b = "b";
   export const c = () => { return d }

src/bar
   export const d = "d"
I don't want to touch the original files and create merge conflicts so I've created a subdirectory in the main repository. It mirrors the exactly layout of the original application but I want to do some overrides.
src/extended_app/foo
  export { a } from "../foo";
  export const b = "b2"
  export { c } from "../foo";
Presently with NormalModuleReplacementPlugin I can make src/foo reference src/extended_app/foo but the problem is /src/extended_app/foo references itself and creates an infinite loop.

I'm not sure what needs to be done with the plugin - I'm not very keen on the internals of webpack - but I created a demo repo of the problem. It is located here:
https://github.com/Handfish/normal-module-replacement-problem-demo/

I am able to log information at the beforeResolve hook when it passes over my subdirectory files.

So with all that being said:

Is there an easier pattern to do this without building a Webpack plugin?
Do you think what I'm trying to do is possible? If so - am I on the right track?

Juho Vepsäläinen
@bebraw
@Handfish i've used https://www.npmjs.com/package/patch-package for small changes. the non-webpack way to do something more involved would be to fork and try to stay in sync with the original project
i guess a webpack plugin could work but based on my experience it can get quite complex fast
Tobi Adeyemi
@Jeezman
Good day guys. Please where can I get the webpack 4 version of survivejs webpack book
Juho Vepsäläinen
@bebraw
@Jeezman check the tags. for example, https://github.com/survivejs/webpack-book/tree/v2.5.11 . i think leanpub is maintaining an archive of the old compiled versions too
it looks like that's it. 2.6 is the one with webpack 5
i'm currently thinking of doing a refresh on the book. that would mean going with ESM or even TS for the examples to catch up with modern tooling