by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 11 08:08
    bebraw commented #321
  • May 11 08:08

    bebraw on dev

    chore: Apply prettier chore: Drop overly strict it's … chore: Thank @billfienberg and 1 more (compare)

  • May 11 08:03

    bebraw on dev

    Replace `it's` with `it is` to … Add missing word to fix grammar… Merge pull request #321 from bi… (compare)

  • May 11 08:03
    bebraw closed #321
  • May 05 19:18
    billfienberg edited #321
  • May 05 19:17
    billfienberg edited #321
  • May 05 19:16
    billfienberg synchronize #321
  • Apr 30 21:53
    billfienberg opened #321
  • Sep 12 2019 11:10
    surajprgupta commented #320
  • Sep 12 2019 11:10
    surajprgupta closed #320
  • Sep 12 2019 11:09
    surajprgupta opened #320
  • Aug 02 2019 14:39
    syedsameerali edited #319
  • Aug 02 2019 13:54
    syedsameerali opened #319
  • Jul 24 2019 10:52
    Max-im commented #80
  • Jul 24 2019 10:52
    Max-im commented #80
  • Jul 10 2019 09:37
    bebraw commented #317
  • Jul 10 2019 09:37
    liuzhuan opened #318
  • Jul 10 2019 09:36
    liuzhuan opened #317
  • May 28 2019 13:02

    bebraw on dev

    chore: Rename wds to developmen… chore: Set up prettier feat: Port the book to use mini… and 1 more (compare)

  • May 24 2019 11:43

    bebraw on dev

    chore: Mention about inspectpac… chore: Extract prerendering to … chore: Add webpack-xray and 1 more (compare)

Juho Vepsäläinen
@bebraw
hopefully it's only some polyfills missing or so as that's an easy fix
boojum
@boojum

Thanks for writing such approachable and yet deep treatment of Webpack! Are you planning on releasing an update when Webpack 5 comes out? And, of course, an obligatory cry for help: is there a way to load a partial config based on what npm command was executed? Without touching the content of package.json. Code example will help me to illustrate what I'm on about.

// webpack.config.js
require('dotenv/config')
const merge = require('webpack-merge')

const { NODE_ENV = 'production' } = process.env

const {
  watch,
} = require('./webpack-parts')

/* TODO: watch only when npm start is executed */
const developmentConfig = merge([
  watch(),
])

module.exports = (mode = NODE_ENV) => {
  if (mode === 'production') {
    return merge(commonConfig, productionConfig, { mode })
  }
  return merge(commonConfig, developmentConfig, { mode })
}
// watch.js
exports.watch = ({ aggregateTimeout, poll, ignored } = {}) => ({
  watch: true,
  watchOptions: {
    aggregateTimeout,
    poll,
    ignored,
  },
})

I'm trying to get the watch.js partial to run only if preceding it command was npm start, and stay dormant / off if its npm run build or anything else. I know that I could do this easily via package.json, just trying to figure out if the same behaviour can be achieved via webpack config only.

Juho Vepsäläinen
@bebraw
@boojum yup, webpack 5 update is on plans. my understanding is that npm sets certain environment variables so that might be one way to do it
@boojum more specifically, check out process.env.npm_lifecycle_event
Juho Vepsäläinen
@bebraw
it gets set to start when you run the config
boojum
@boojum
@bebraw process.env.npm_lifecycle_event fit the bill perfectly, thanks!
@bebraw how about the React book? Is an update here on the cards as well? I'm reading through the leanpub version now, and as clear and concise as it is, it would benefit from an update (functional components, hooks, suspense etc). Can we expect one?
Juho Vepsäläinen
@bebraw
@boojum i cannot guarantee anything on the react book but it would be great to rewrite in functional components and hooks, yeah. it's not that much work but i cannot give a specific eta as there's client work atm
Juho Vepsäläinen
@bebraw
i released a new version of https://www.npmjs.com/package/mini-html-webpack-plugin recently. it doesn't have a full feature parity with html-webpack-plugin (no plugin system) but i've refined to the point where you can build most, if not everything, on top
it's cool even for multi-page setups and now it's possible to filter the chunks you want per page
so technically it can be the core for a simple static site generator if you wrap it behind some abstraction
Andrea Chiumenti
@kiuma
hello everybody, I've a task that I'm not sure how to solve and I'd appreciate suggestions if you have any. I've several projects that build more or less with the same tools. Let's say same wp version with same loaders same plugins and similar configuration. I wanted to create a library to avoid package.json pollution of devDependencies repetitions. Do you have any idea how I could accomplish this task? I was thinking about creating a package using webpack-cli, but I think the cli is not meant to be a library...
Juho Vepsäläinen
@bebraw
@kiuma in a recent client case, i ended up pulling the shared configuration to a npm package. it contains all the setup in composable form (functions) that i then combine with webpack-merge
in addition i share babel and eslint setup through the package so i can pull the webpack specific configuration to the projects
with this approach, you'll maintain the dependencies in a single place though the tradeoff is that it's going to pull all direct dependencies of the project to the consumer even if you don't need them. for me, that's a minor annoyance
likely it's solvable technically but this would imply you know which parts of the configuration are used and which dependencies those use. it doesn't feel worth solving yet at least
Andrea Chiumenti
@kiuma
hello @bebraw I understand this and it was an option, I also want to share devDependencies and now I'm following this path. If you are interested I will share with you my results
Juho Vepsäläinen
@bebraw
@kiuma sure, cool
quanganhtran
@quanganhtran
hi @bebraw what does it mean when I analyze my bundle and get this huge chunk index.jsx + 959 modules (concatenated)?
it is separate from node_modules
if I try to break it down there are even more node_modules
Andrea Chiumenti
@kiuma
hello @bebraw I'm near to the solution I will share with you but I have some issues with loaders. Loaders actually are defined into configuration file but the import is at package level
I mean my builder has the dependency of loader, but not the project
when in the project I programmatically start webpack, it searches the loaders in app/node_moudules but loaders are inside app/node_modules/builder/node_modules/
is there a tecnique or something to register a loader so that webpack doesn't need to search the loader in the wrong place ?
Juho Vepsäläinen
@bebraw
@quanganhtran can you share the stats file of your project? it's hard to tell without some analysis
@kiuma yeah, check resolveLoader - https://webpack.js.org/configuration/resolve/#resolveloader . it's the same idea as for resolve but for loaders
quanganhtran
@quanganhtran
@bebraw might be hard as it is company project. though I'm just curious in general what "concatenated modules" are, and what's the difference between them and the other modules
Juho Vepsäläinen
@bebraw
@quanganhtran if i remember correctly, module concatenation is a size optimization by webpack. you can find a full explanation at https://webpack.js.org/plugins/module-concatenation-plugin/
it's enabled by default in production mode
@quanganhtran it sounds like webpack is pulling your app code and maybe dependencies as well to the same bundle. you could look into bundle and code splitting
quanganhtran
@quanganhtran

if i remember correctly, module concatenation is a size optimization by webpack.

ah ha! so the one not included in the concatenated bundle just cannot be (like non-es6 etc.)

Juho Vepsäläinen
@bebraw
@quanganhtran what do you mean by non-es6? depending on the setup, it's going to either compile es6 bits out or retain them. a while ago i did a double setup where i emitted something for both modern and legacy browsers (this would be great to add to the book)
quanganhtran
@quanganhtran
Ah, I meant common js modules
the webpack docs said those are not concatenated
by the way, @bebraw do you know any loader that can give you source metadata (line number, file path etc.) for the runtime?
something like finding a string in the code (e.g. PATH_TO_FILE) and replace it with actual path to the source file or the line numbers
Juho Vepsäläinen
@bebraw
@quanganhtran i know https://www.npmjs.com/package/source-map-loader would come in handy for any external dependencies with source maps. webpack's devtool option should cover the rest
does that answer your question?
Andrea Chiumenti
@kiuma
hello prisoners!

I've set

entry: {
      'change-my-name-bundle': ['./src/index.jsx'],
    },

to my config.
Why do I see these errors during compilation ? Error --------------------------------------------------------- .history/src/components/Redirect_20200427172300.jsx:5:21

I've also added .history to .eslintignore
Andrea Chiumenti
@kiuma
Flow validation
Error --------------------------------------------------------- .history/src/components/Redirect_20200427172300.jsx:5:21

Unexpected token {, expected the token =

     2|
     3| import React from "react";
     4|
     5| type RedirectParams {
     6|     location: {
     7|         pathname: string,
     8|         search: string,


Error -------------------------------------------------------- .history/src/components/Redirect_20200427172317.jsx:13:19
.......
Well it seems to be flow... but why is it going there ?
Andrea Chiumenti
@kiuma
I've just found that Flow is somewhat disconnected from the build tool and I had to add to .flowconfig:
[ignore]
.*/.history/.*
Another question: I'm using react + router + redux + saga and immutable , With just only the boilerplate my bundle size is about 400kb more or less the double of WP recommended size. I'm also using TerserPlugin to optimize the size. My question is: how could a modern application be smaller than 400kb ? Why this 200kb default limit ?
Juho Vepsäläinen
@bebraw
@kiuma i know immutable alone is big
i am not sure where the 200 kb limit comes from, though
it's worth checking out the exact contents with https://www.npmjs.com/package/webpack-bundle-analyzer
Kyle Tozer
@kyletozer
How might I configure webpack so that some of my entry point scripts retain a specific script that I also want extracted into a vendor bundle? Is this possible in splitChunks or within another part of the Webpack configuration?