My issue is that this tutorial is too awesome

[Maximilianos]

Seriously. I've been working with Webpack for over a year, putting stuff together from bits over there, bits over here. After reading this tutorial I finally feel like its all coming together. This is a tutorial like all tutorials should be: focus on being simple, tackle one problem at a time; basic building blocks that add up, step by step, to making you feel like a developer wearing a jetpack!

Thank you 😄

PS: feel free to close this issue whenever.

[AriaFallah]

I might just never close it haha. Thank you for the warm words!

[alexkvazos]

Thank you @AriaFallah! This was the tutorial that helped me jump into Webpack and understand how to set it up for live reloads and rapid development. When do you think you will have one with react? I know that with this tool you can update component's code without loosing the state.

Many thanks!
-Alex

[AriaFallah]

@alexkvazos

For the time being, I've become really busy, and I don't think I'll put out future parts for at least another week or two.

Another part of the reason I've held off is because it's extremely trivial to finally hook up HMR to React, and I've been wanting to find out if there's other content I can add to part3.

However, since I just said it was easy, I might as well put up a quick example. I haven't tested this, but the process would be something like this:

Using https://github.com/gaearon/react-transform-boilerplate as a reference:

Add these two plugins to your webpack config (although you should already have the HotModuleReplacement one):

plugins: [
  // ...other plugins
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin()
],

Install these babel presets:

npm install --save-dev babel-preset-react
npm install --save-dev babel-preset-react-hmre 

Change your .babelrc to

{
  "presets": ["react", "es2015", "stage-2"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

And I think that should be it.

Again, I'm not sure if I got everything right because, unlike the tutorials, I wrote this quickly without testing. If you actually try this out, let me know if it works.

At the very least I hope that helps.

[altaywtf]

same here, thanks for putting this together.

[felicedeNigris]

Hey@AriaFallah, Thank you this series on webpack is shining a new light for how I understand webpack.
One thing I noticed is that hot reloading only worked when I changed my npm script from
"devbuild": "webpack-dev-server --config webpack.config.dev.js" to
"devbuild": "webpack-dev-server --hot --inline --config webpack.config.dev.js" with --hot --inline

Not sure if that's been affecting other users.

[AriaFallah]

@felicedeNigris that's interesting. That's how you would do hot reloading from the CLI if you didn't have it configured in you webpack.config.dev.js, but if you have the HotModuleReplacementPlugin and the hot: true for your dev server config, it should be working.

If that doesn't work check out: https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.cujh3xov7

It's very well written.

[felicedeNigris]

Thanks for sharing the link !

[AyumiKai]

支持下台湾的同胞，很受用，请继续加油！

[dhoomm]

Ok, now even I can use webpack after this tutorial. Thanks

[zsuswy]

Best webpack tutorial i'v ever seen !!!
Thanks!

[rcmontoy]

I wanted to say thank you as well. Absolutely wonderful tutorial for someone diving into front end!

[Silentz0r]

Hey, this tutorial is awesome, i'm really new to webpack and i have a question.

When i run dev, it's supposed to output the files in dist folder? because when i use build i get the files in dist but dev doesn't.

[AriaFallah]

@Silentz0r

Hey, nice observation! I was also confused about this when I first started. First you should understand that you're running two different commands:

"build": "webpack --config webpack.config.prod.js",
"dev"  : "webpack-dev-server --config webpack.config.dev.js"

When you run the dev config, you're not running webpack, you're running the webpack-dev-server. The dev server has no need for the files to be output since it uses them directly itself through webpack's API. Specifically, whoever wrote webpack-dev-server does require('webpack') inside their code, and uses it from inside their code instead of from the command line. When doing it like this, they don't really have the need to generate files as I would guess that they decided the overhead of writing a file was not worth it during development (files are changing often so no point constantly rewriting them).

When you run build your intention is to generate the files for distribution by any static file server. You need actual files for this unlike webpack-dev-server that can operate without them.

Does that make sense?

[Silentz0r]

Ohh, i get it now! It was so confusing to me and had to ask. I don't know if i did something wrong or the fact i'm using Node v7 and didnt know could be issues with webpack with this version OR i don't understand quite well how the HMR works but when i apply the changes to the HTML the console shows me that's HMR is hot reloading the app but i dont see the changes applied. Ex. A button i did in the HTML i changed the name from OK to Submit.

Edit: When i refresh the page (F5) i can see the html changed.

Is this a expected behavior or i'm doing something wrong? Thank you again for this tutorial!