I am a hands on learner, 4 hour courses have never given me much whereas tinkering has. I think it’s time for me to eject a create-react-app or even start from scratch to learn Webpack. Can you guys give me some suggestions for useful things that an ecommerce developer might do with a custom webpack config? All I know now is that webpack runs ES6 (babel) transformers.
Why do you need a custom config? What is the problem you’re trying to solve?
Is the bundle too big and you want some code splitting and tree-shaking?
Do you wan’t to use some preprocessor (like SCSS or TypeScript; although CRA v2 supports both SCSS and TypeScript out-of-the-box)?
Maybe you live on the edge and want to use some stage-0 JS features 
?
Best place to learn is official webpack docs.
It’s nice to look through ejected CRA if you already understand some basics of Webpack. If you know nothing you won’t get much from it.
It doesn’t unless you configure it.
Webpack has an extremely comprehensive guide. It’s really not optional reading if you want to create your own webpack configurations, at least not the first few chapters. While you could read through the webpack of an ejected create-react-app, it’s extremely large and complex, whereas you might want to start with something more minimal, such as this repo containing a minimal config which just does babel and nothing else (you’ll want to add at least some kind of CSS loader to it)
2 Likes
I personally would never recommend this approach of reading the docs with the goal of “understanding” how to use webpack. Its similar to reading a dictionary to learn how to write, you can learn all the content, but without context your going to have a hard time even if you somehow memories all the possibilities.
I’d say its good to skim over the key webpack configs, but I wouldn’t go beyond that unless you had a specific goal in mind (rolling a custom React config from scratch for example). Webpack is a very expansive tool that gets even more expansive with plugins.
The general approach to learning complex topics should never be “learn all the complexity”, rather it should be sufficiently learn how to abstract away parts of the complexity so you can focus on only parts of it so its less complex. For example, you don’t need to learn how Chrome’s V8 engine works to learn how to program in Javascript. The knowledge is good to know, and might help in some cases, but that only if you need/want to know. I’d say the same goes for all the potential use-cases for Webpack. (probably to a less degree)
I’ll just say your probably better off spending more time on building a good ecomerce site, and getting core required knowledge, like how to charge people, than learning how every single part of webpack works.
1 Like
JS modules* can’t be used in browsers. Webpack takes a set of JS modules and bundles all them down into one [or more] file/s that can be used in a browser. That’s it’s purpose.
You select what the input file/s are, and what the output file/s are. Like you have main.js that imports foo.js and you put main through Webpack and out the other end you get bundle.js which contains the contents of both of those files.
If you are bundling up some JS into a single file, it makes sense to do any other transformations of the structure at the last minute, just before you end up with that bundle. This is where most of the complexity comes in. So for the most common example, you may also want to make sure your JS code works in older browsers, so you want it to be run through the Babel compiler before that bundle is created.
* before anyone says, I know ES6 modules can be used in browsers, but using that finctionality isn’t practical in reality & won’t be for the next few years at least.
So given the above, the answer to this is along the lines of “take a bunch of JS files for your project and generate a single JS file (compiled according to the needs of your project) to use in the browser”.
If you want to learn to use it (and it isn’t hugely complex & the docs are ok), make a folder, put an index.html file in there + some JS modules (just files that use imports and exports) that do something. Install Webpack, then use it to generate a single file you can use in a script tag in that index file. Then write what you did into a config file, use that. Then add some NPM modules. Get it running in watch mode and refreshing automatically. Maybe see if you can use it for CSS. Etc etc.
Edit: It doesn’t make much sense to say “custom config”, because part of the point is that it allows a config that is specific to the project it is being used for. It’s a script for gluing together other scripts to build a specific project. And as result, the config files (as config files tend to) are often a gnarly mess. This is a long winded way of saying the same thing as others here, that you won’t get much from looking at CRA’s config files
1 Like