Hey @TheLarkInn, I watched your talk on webpack "Everything is a plugin". It was great. Thank you!

Hi LarkInn,
I trust you are doing great. I followed your Webpack 4 course from Frontend Masters and have got great foundational understanding about it. I am going to deliver a talk at React and React Native Meetup BLR around Vite.js and Snowpack and so needed some of your help in that.

Since you are the OG person in the community to seek for insights about this, I would be very obliged if you can answer to few curiosities of mine:

• How do you see Vite/Snowpack as a modern Bundler? What are the must-discuss points when talking about them?
• Why did these new bundlers came into existence? What was the need?
• Vite uses ESBuild for fast bundling in development while uses Rollup for build processes. I couldn't process this well as this is quite different from what I have seen before with other Bundlers. How does Webpack stand compared to this newer approach?
• Vite and Snowpack prefers serving with native ESM. Does webpack also plans to do that?

I particularly loved how you discussed the WHY of webpack before even starting to talk about Webpack in the course, taking us through the journey was indeed fascinating. In this talk, my goal is to provide value to the audience by removing the black box of JS bundling and talking about the Journey of Web Bundling similar to how you did it 🤩

Grateful and thankful for this in advance.

Regards,
@sohamsshah

Heya,

I'm always on the internet learning new things or trying to keep up with the cool kids. Seems like its a never ending task. How do you keep up with all the goings on in our industry?

Ritchie

I'm a GSoC aspirant for 2k19... So I really want to contribute to webpack.
I am willing to contribute to one of your creation webpack. I don't consider my self as a pro javascript developer but yes I have a working knowledge of javascript. I saw git repo of webpack. As I am a MERN stack developer I really want to contribute to webpack. I want you to help me out in understanding webpack development and be my all-time mentor. Also, I want to contribute in making webpack GUI.
Thank you, Thank you for your contribution to OpenSource🙂

I am working on a project where I have to use webpack and angularjs. (I know i should update but decision not in my hand). So the project on which I am working, the hot build itself takes around 10 seconds to compile. That's after having two separate modules(one for prod and one for dev..dev one having less modules to import). Is there a faster way to have a development process? In order to improve I have tried HardSourceWebpackPlugin() with not much luck. In addition to that I have disabled minification. Any insight would be helpful.

Apart from that I intend to be a good front end developer. Any tips or a path to guide me in the right direction. I am in desperate need of a mentor to just guide me in the right direction becuase the circle I ended up with has been dragging me down in which ever way possible.

Thanks
:)

Hi Sean!
We're looking for a solution for having multiple angular2 apps in one browser, can we solve it with webpack?
We have our Main App which is just a nav bar, and we want it to load webpack's chunk on demands.
We first compile our MainApp with dummy apps inside it, to get the chunks referenses.
Next, we're planning to upgrade only a specific chunk at a time.

It seem to work for minor changes (adding new components).
Does Webpack officially support replacing chunks in run time?

Note:

• The entry module for each chunk stays exactly the same
• It's a new project, we can use the latest version of webpack.

I will like to know how should I know how to configure different kind of libraries/apps

Hi,

I noticed on the docs it said to replace request but it did nothing. I instead replaced resource and I managed to switch the module out under the hood. Is that correct or am I missing something?

hello, I watched your tutorial for webpack 4 on frontEnd Masters, it was awesome. I'm encouraged to dive deeper into the language and hopefully learn as much as you know and be able to create great open-source projects as you did :D

I saw a conference talk you gave a...while ago (2017?) where you listed out the lifecycle stages of a webpack compilation- things like "resolution", "parsing", etc.. It was really helpful to me understanding all the stages and the terminology that webpack uses internally. I think it might have been hand drawn (by you?).

Do you still have such a diagram or an updated one? I'm giving a brownbag talk at my company and I think it will be deeply useful to help explain what webpack is actually doing.

Is Nebrasaka a good place to live in ? how is the weather there ?

Hi Larkin,

https://raw.githubusercontent.com/madclem/pixi-game-template/master/webpack.config.js

In the above file you can see the resolve config :
resolve: {
extensions: ['.json', '.js', '.jsx', '.css'],
alias: {
'framework': path.join(__dirname, './src/scripts/framework'),
'app': path.join(__dirname, './src/scripts/app'),
'game': path.join(__dirname, './src/scripts/game'),
'PIXI' : path.join(__dirname, './node_modules/pixi.js'),
}
I want to code splitting the bundle based on this folders, as my requirement is we will have single core bundle, we can have multiple frameworks and we will make multiple games by extending the core.

so can you please guide me on this.

Thanks for the help.

Hi Sean,
I have a project built with Webpack 3 that works perfectly. So, I started over with Webpack 4 and it in "development mode" is still working smoothly but when I change it to "production mode" looks building everything well but all features powered by jQuery isn't working. Could you give me a clue what am I doing wrong? I already went by all Stack Overflow fields, Google searches and didn't find anything that could help me.
Thanks,
Paulo

Currently @ngconf, but couldn't ask this question due to the large crowd. I heard you answer a similar question, and you mentioned that for a number of reasons (including security) there are no real plans for webpack to support dynamic importing of external modules. In our scenario, we need two separate projects that will get recompiled for production at two different cadences independently.

Is it possible to "trick" webpack in anyway by adding an empty module of the same name at a certain external url at compile time, and then at runtime populating said module with more things (like an ngfactory)? Or would you recommend just going a completely different route like systemJS at that point?

Hey @TheLarkInn

I did play a lot with webpack since version 1.

In order to help my collegues learn what is webpack or how to use it, I boostrap some workshops bases on Webpack doc guides.

I wanted something simple to setup and open to the community (Based on a Vuepress website and yarn workspaces)

https://slashgear.github.io/webpack-workshop/

Do you know if this kind of initiative have already existed for webpack ?

Just a random question, right now webpack takes a good 2-3 second to recompile every time on a file save, and I was wondering if this time can be reduced...

Hey Sean,

I watched your talk "Everything is a plugin!" and really enjoyed it; it helped to demistify the plugin ecosystem a fair bit. Recently I've been trying to develop my own plugin that would help manage a large project made up of many micro frontends, but I could really use your advice on what I can do better if you have the time.

Bit of context about the plugin first might help. The plugin focuses purely on allowing users to enforce rules as to whether a given apps modules are allowed to import modules from a seperate app.

The use case is quite a niche one because it really only makes sense when you are generating multiple bundles and you want them to be able to interact in certain ways. It also requires that webpacks library option is set (so each bundle is assigned to a variable).

I've made a repo on github with a minimal example showcasing it's functionality, which also has more of an explanation as to why you might need it. Here's the link:

https://github.com/Francesco-Lanciana/prevent-cross-project-imports-webpack-plugin#

Some of the things I could really use your advice on are:

1. Am I tapping into an event too late in the lifecycle? My first attempt (which can be found in old.js) was to try tap into the resolvers lifecycle but I was having trouble finding a place where I had both the modules full path and its dependencies full path.

2. How do you go about throwing an error properly, especially one that actually stops the bundle from still compiling? Because this plugin is just enforcing more rules on imports, you can still have a perfectly valid project even if it finds a violation. Therefore it still compiles but just shows my error message below that. Currently I'm using the FriendlyErrorsWebpackPlugin to hide the compilation details but this approach is pretty sucky (needs more than just my plugin and it doesn't actually prevent compilation).

3. This relates to Question 1 but I would also really like it if I could reliably show the line that the improper import was happening on. I attempted it with my plugin, however I only had access to the transpiled code so mapping it back to the original file was hacky to say the least (find the line that contained the import substring and counting the requires before it). If you knew a way to do this that would be awesome.

4. Have you ever seen any other use case for something like this (or even a plugin that does the same thing)? Maybe what I'm trying to do makes no sense but I'm in too deep at the moment haha.

Thanks a ton for your time, I'm really keen to get your feedback. Let me know if you have any questions or if something I said made no sense, I'll answer as quickly as I can :)

Hello Sean,
I am pretty new to contributing to open source. This is my first pull request to tapable, but its been quite a while nobody responded. I just want to understand what I am I missing here. I really want to contribute to webpack.
Thank you.

This stack overflow post is a good summation of the issue I hope. Please let me know if you'd like to try to run the project and I will create a public repo.

We are trying to create "microservices on the client" by breaking apart apps into multiple projects and loading the chunks at runtime. If I figure this out, I intend to create a blog post showing the community how to do this. Could be a game changer for large teams working on huge front end apps.

Help me Sean Kenobi, you're my only hope. Also, our company is a financial contributor to both angular and webpack, for what that's worth. ;)

I want to come in the field of open source and start contributing and developing.
But I am afraid whether I have acquired enough knowledge or not to do so.Or should I just start doing anyway.I want to learn and develop in javascript and other backend stuff.So where do I start for open source and how to start contributing and develop things!!

What is the difference between bundling all CSS into Javascript so we can be sure that we're only feeding the user the CSS needed for a page and using UNCSS and Critical to inline and deliver only the CSS needed for a page or a screen in an app?

Same thing with images; Is it worth or even necessary to convert all images over a given size into Base64 strings just so we can inline them in javascript or is it better to use responsive images (with all the associated pain in the ass they entail) and build the responsive images from a script or a build file?

I was watching your Webpack 4 Fundamentals course on FrontEndMasters and observed something about the way Webpack handles CommonJS Module Imports and ECMAScript Modules.

Please see this small code snippet - Code Snippet

Line 14 logs an empty object but line 24 logs undefined. So can we say Webpack treats every module as CommonJS module by default?

For example: kentcdodds#5

Screenshot please. It tells a lot about a person.

Hello :)

I just watched your presentation from the 2017 VueConf and I liked it so much, I wanted to try to lazy-load a module in my custom vue application.

Basically, I have my routes set up from database, and one of them is the route to display programs (for children). In this program, I load several components, like list of clients, consents, etc.

Currently, I have it like so, but wanted to adapt it like you did, so I changed it to this, but unfortunately my whole application fails to build and run (if I rebuild it), or get this error otherwise:

in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/programs/program.vue Module parse failed: E:\Gabi\khcc-crm-playground\node_modules\babel-loader\lib\index.js!E:\Gabi\khcc-crm-playground\node_modules\vue-loader\lib\selector.js?type=script&index=0!E:\Gabi\khcc-crm-playground\src\components\programs\program.vue Unexpected token (58:8) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (58:8) at Parser.pp$4.raise (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseExpression (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1573:21) at Parser.pp$1.parseReturnStatement (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:839:33) at Parser.pp$1.parseStatement (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:699:34) at Parser.pp$1.parseBlock (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:981:25) at Parser.pp$3.parseFunctionBody (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:2105:24) at Parser.pp$1.parseFunction (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1065:10) at Parser.pp$3.parseExprAtom (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1810:19) at Parser.pp$3.parseExprSubscripts (E:\Gabi\khcc-crm-playground\node_modules\acorn\dist\acorn.js:1715:21) @ ./src/components/programs/program.vue 3:2-107

I have updated my node packages, including vue to the latest version (2.5.1X, if I remember correctly), but to no avail. Can you please help me out with some thoughts?

Much appreciated,
Gabriel

I dig the theme you are using in VS Code. Which theme is it?

Thanks!

What is webpack ?
Why we introduced Webpack ?
Can you please brief me these two question.

Primarily, what was the one thing that sparked the interest in working with Webpack and leading that open source community?

Hey Larkinn,
first of all you have a great knowledge on webpack, leaning from your course : https://frontendmasters.com/courses/webpack-fundamentals/

Just wanted to know is ParcelJS is taking away WebPack, as they claim they are zero configuration bundlers

I'm very intersting with webpack source map.
I am curious about why when in inline soure map, we should wrap the module in a eval function ?

Is that relate to column number and row number in source map ?

I search all the internet but no too much discussion.

Hey Larklnn,

I started to follow your "Webpack Fundamentals" course on "frontendmasters" The stories that you tell are awesome and powerful, though. It makes me understand for the first time the context around webpack. At a point in the history of modules yo speak about commonJS and the live bind issue! Can you clear my way and give more details about what is live binding exactly? why use the term "live"? The more a search on the net, the more I am confused.

Thanks,
JP

testing

Actually I wasn't very sure before opening this issue (actually, it was opened because I didn't know that hitting enter would open the issue), because may be you're not the right person to help me with that, the idea was to talk with the egghead folks, so hopefully this damn enter will help me reach them out with your help :)

The fact is that I got an internship a couple of months ago as front-end developer at a very small company here in Londrina - Brazil, where I live, and I wanted to leverage my knowledge because I really like this and I really think egghead is one of the best options out there, because it assembles really great and experienced people. Well, the problem is that the yearly egghead membership is literally equivalent to my salary. I'm saving some money and already got about $ 100 USD, which was the older price, but now the price has increased 150%, and I do want to pay for that, because I truly appreciate all of their work, but I cannot afford this at this very moment, it would take me a couple of months to get this (and I'm gonna get this!). Is there anyway or advise you could help me with?