This is something that I struggled with when I first picked up webpack as well, since I wanted my production and development scripts to be as similar as possible.

Currently I use a custom plugin that will receive the stats object, extract the JS and CSS list, and pass it to an Html.jsx file.

I recently found html-webpack-plugin, but haven't tried it.

To trigger auto refresh of the browser, you need to add a script in build/index.html:

Link http://webpack.github.io/docs/webpack-dev-server.html contains this code

module.exports = {
  entry: {
    app: ['webpack/hot/dev-server', './app/main.js']
  },
  ...
};

With this message

And make sure you have the special webpack/hot/dev-server entry point in your configuration

This is undocumented. You also use the same chunk in your own examples.
But the funniest thing that official react-starter from webpack does not contain this. And they have both live and hot reload enabled...

Here is their entry (single place in code):

var entry = {
  main: options.prerender ? "./config/mainPrerenderer" : "./config/mainApp"
  // second: options.prerender ? "./config/secondPrerenderer" : "./config/secondApp"
};

Did you manage to understand what's about this webpack/hot/dev-server line?
What exactly is does? Why everyone uses it except Webpack itself 😃 ?

Just opening this so we can track the status of migration:

• Figure out how to deal with redirects. Each page should point to a new one on survivejs.com site so we don't break the internet. Basically each old page needs something like <meta http-equiv="refresh" content="0; url=http://example.com/" />.
• Make sure survivejs site can pick up the material. We'll probably end up with /webpack_cookbook and pages below that.
• Assuming the first two have been completed, switch over. After that I'll go through the issues and try to resolve as many as I can. The content needs some other tweaks as well.

@christianalfoni Sounds good?

There seems to be tons of info below question tag. Example: webpack/webpack#739 (reproducible builds). Maybe some of that could be incorporated into the book?

ERROR in ./~/react-dom/index.js
[0] Module not found: Error: Cannot resolve 'file' or 'directory' /home/romseguy/myproject/node_modules/react/dist/react.min.js/lib/ReactDOMClient in /home/romseguy/myproject/discount-ascii-warehouse-0.2.0/node_modules/react-dom

https://christianalfoni.github.io/react-webpack-cookbook/Optimizing-rebundling.html

Is there a way to prevent using the alias over the node_modules directory?

I did some initial stab at the wiki. I guess it can grow from that. Basic structure:

• General
• React.js
• <tool/environment specific>

Recipes should go beyond each. One alternative would be to think up a format that allows recipes to be tagged (can belong to multiple). Then you could implement a filtering UI based on that. But that's not needed yet and can be thought about later on.

BabelJS just launched new major version 6. It makes breaking changes, especially how to compile React and ES6. I was getting this error:

ERROR in ./app/main.jsx
Module build failed: SyntaxError: /home/edward/learn/react-webpack-cookbook/app/main.jsx: Unexpected token (7:17)
  5 | 
  6 | function main() {
> 7 |     React.render(<Hello />, document.getElementById('app'));
    |                  ^
  8 | }
  9 | 

I wrote a post in here to solve that: https://edwardsamuel.wordpress.com/2015/11/01/react-syntax-error-unexpected-token/.

The code examples in Basics of JSX are invisible. The code is not formatted or escaped.
https://christianalfoni.github.io/react-webpack-cookbook/Introduction-to-React-JS.html

Hi,

I found your post about multi entry points really useful (https://github.com/christianalfoni/react-webpack-cookbook/wiki/Multiple-entry-points).

But in your post about hot loading components (https://github.com/christianalfoni/react-webpack-cookbook/wiki/Hot-loading-components), no more mentions of multi entry points. Would you have an example laying around about this one ? :) Can't find a way to make it work. It seems that my HMR is never triggered.

Thanks !

Well made wikis:

http://www.quora.com/What-are-some-examples-of-very-well-made-GitHub-wiki-pages-for-open-source-projects

Artifacts is spelled artefacts on the Introduction to Webpack page.

I was reading the cookbook, and just noticed this section.

Unless Webpack is doing something really sneaky here (which I don't think is the case, but do correct me if I'm wrong), these styles will end up being rendered into the page as inline styles on DOM elements.

This is generally poor for application security. Aspects of inline styles can be used in various attacks, including XSS attacks, and it's generally preferable to disable them with a Content Security Policy if possible.

I advise adding a warning to this section to say that it could cause security issues, and that it is not advised to use it in production.

Hi,

If I setup the recommended alias for react in dev mode all works fine except any warning you may receive prom react propTypes do no occur.

For example I had this for an ImageItem component:

ImageItem.propTypes = {
src: React.PropTypes.string.isRequired
};

and purposely used this: (no props)

With the alias in place it all works fine but you get no warnings.

When I remove the alias I get the expected warning:
Warning: Failed propType: Required prop src was not specified in ImageItem. Check the render method of Root.

I thought I'd just mention this because if using the minified version suppresses warnings it kinda defeats the purpose since you want to see these things in dev mode.

Cheers

Apparently something like @import "~theo?less!./file.json" should work within LESS files. The idea here is that ./file/json gets processed by a tool known as theo. After processing it is something less loader can take care of.

Hey @christianalfoni great work with this cookbook, it has been very useful. One thing we could add underneath "Loading LESS or SASS" is the "Loading SVG" page.

I know we have a few ways to achieve this using with svg-loader but the simple way to do that is through file-loader.

module: {
  loaders: [
  ...
  { 
    test: /\.svg$/, 
    loader: "file-loader" 
  },
  ...
  ]
}

Then in your CSS:

.MyIcon {
  ...
  background-image: url(../assets/my-icon.svg);
}

I know I lost a few minutes yesterday looking, it might be useful for someone else as well.

Thoughts?

Cheers

I got this error when use weppack-dev-server for automatically refresh.
Uncaught Error: [HMR] Hot Module Replacement is disabled.
dev in package.json is
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
entry in webpack.config.js is
entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'main.js')],
How to deal with that?

on https://christianalfoni.github.io/react-webpack-cookbook/Automatic-browser-refresh.html

Instead of adding http://localhost:8080/webpack-dev-server.js to the HTML, you can add webpack-dev-server/client?http://localhost:8080 to the entry list.

This also makes it easier to disable HMR changes in production builds.

Ie. when/how to use publicPath and so on. Looks like that can be confusing to some. Speaking of output, html-webpack-plugin might deserve a few words.

https://github.com/webpack/expose-loader

This can be useful with React and Chrome React tools at least.

It might be a good idea to contact some webpack users to figure out common tasks/problems and how they solve them.

Hi there I have been following this cookbook, I know babel-loader is used for parsing jsx but in section 3.1 Loading CSS, on the the webpack.config.js loader for jsx is changed to 'jsx' from 'babel', and I get error when running npm run dev. But if i put 'babel', it work fine. Do I need to install jsx-loader but I guess we dont need that as we already have bable-loader doing same thing. Am i missing something or should be it 'babel' instead of 'jsx'. Thanks.

On Automatic-browser-refresh.html, it mentions

We added a script that refreshes the application when a change occurs. You will also need to add an entry point to your configuration:

without specifying the file to be edited.

Tried to combine these two techniques and I ended up in a fiery of flames and agony ;)

A lot of Module not found: Error: Cannot resolve 'file' or 'dictionary C:\foo\bar\node_modules\react\dist\react.min.js/lib/ReactMount in foo.jsx

It would be nice to add this guide: http://gaearon.github.io/react-hot-loader/getstarted/

https://christianalfoni.github.io/react-webpack-cookbook/Configuring-react-js.html

I tried to make a screenshot but for some reason it's not working. In the Using "React JS in the code" it says "In any file" but I think the react code should be saved in the component.js file.

Thanks for making this tutorial btw, this is just what I wanted.

Just to quote @jeffijoe at Gitter (sample conf):

Loaders:

    {
      test: /moxie\-plupload/,
      loader: 'imports?mOxie=moxie!exports?window.plupload'
    }, {
      test: /moxie/i,
      loader: 'exports?this.mOxie'
    }

Alias:

      moxie: 'plupload/js/moxie.js',
      'moxie-plupload': 'plupload/js/plupload.dev.js',

ProvidePlugin:

mOxie: 'moxie'

Hi,

I have been struggling for a bit, trying to optimize my dev environment.
In my package.json I import the following libraries as dependencies:

    "react": "0.13.3",
    "react-router": "0.13.3"

and taking clues from your Optimizing-development.md document I end up with this in my deps array (I also tried just to import React only but also get an error with React Router):

  deps= [
    'react/dist/react-with-addons.min.js',
    'react-router/umd/ReactRouter.min.js'
  ];

I also tried with and without the following line in my loaders list:

    loaders: [
      {test: path.resolve(modulesPath, 'react/dist/react-with-addons.min.js'), loader: 'expose?React'}
]

The problem is that is that I just get errors of this kind (all works well if I don't use aliases):

Uncaught ReferenceError: require is not defined

I understand somewhat that the UMD React Router package does a require('react') but Webpack require is not exposed and I have no clue how to even do that at this stage.
Could you point me to the right direction ? My current alternative which not to use any aliases and noParse adds several seconds to rebundling.
Is there an alternative option (and please no Bower) ?

Thanks.

In the sample you have

vendors: ['react']

but no where in that sample page do you define react. On your site you define it as

config.addVendor('react', bower_dir + '/react/react.min.js');

so I expect it to be the same, if so also need to add the addVendor method.

Hi,
I read this page: https://christianalfoni.github.io/react-webpack-cookbook/Loading-CSS.html
I made some tests, a virtual css style-sheet was appended to <head> via javascript.
I tested style-loader, css-loader and less-loader chaining style!css!less and it worked as expected.

Wow...
But I have a lot of questions flying in my head... I really dunno if I want to do this...
If not out of scope, can you add some thoughts about embedding css this way?

Thanks
V

Hi,

thanks for the cookbook !
I have an issue with the receipt spliting app and vendor : my vendor.js is way larger than my app.js and so is loaded after the application code, triggering of course a "webpackJsonp is not defined" exception. Is there a Webpack way to deal with this ?

Thanks !

Hi there,

You said that change of menu structure would probably break gitbook. I suggested a change now as it felt a bit weird to have those headers as links. There was not really anything to put in there :-)

It would be great, if you agree, to spread some fairy dust on gitbook and make this structure work.

Adding content whenever I get time. Things are starting to come a bit more together now. Looking forward to spreading it like crazy, I think this will be extremely valuable to developers :-)

Hi. I've read tutorial about spltting code into different chunks and still have some issues. Could you please take a look into my question on Stackoverflow?

https://github.com/fakefish/react-webpack-cookbook
this is my forked repo.

I have yet to see an example that combines...

• Multiple end points (main, Home, Admin)
• Common.js pulled out of the multiple end points (Shared)
• Lazy load the endpoints that you created (Home, Admin)

SEE: 7, 8, 9 https://github.com/petehunt/webpack-howto

Looking into some of your issues/questions/articles and they all point to the same things.

Home/Admin has duplicate code and there is only ever one entry point.

Do you know if this is possible?

Thanks!

Replace documentation of Hot loading on React Hot Loader with React Transformer HMR since React Hot Loader is depreciated.

https://github.com/gaearon/react-transform-hmr
EX:https://github.com/gaearon/react-transform-boilerplate

The first <span> is not closed correctly.

return <div className='TodoItem'>
            <span className='TodoItem-owner'>{owner}<span>
            <span className='TodoItem-task'>{task}</span>
            <span className='TodoItem-likes'>{likes}</span>
            <span className='TodoItem-like' onClick={this.like}>Like</span>
        </div>;

found here: http://christianalfoni.github.io/react-webpack-cookbook/Introduction-to-React-JS.html

Bye
V

Hi,
the following javascript code

import React from 'react';

export default React.createClass({
  render: function () {
    return React.createElement('h1', null, 'Hello world');
  }
});
;

found in https://github.com/christianalfoni/react-webpack-cookbook/wiki/Configuring-react-js

gives me the following error when launching webpack

ERROR in ./app/Component.js
Module parse failed: C:\inetpub\wwwroot\webpack\app\Component.js Line 1: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| import React from 'react';
|
| export default React.createClass({
 @ ./app/main.js 3:16-41

Can you help me?
I'm a noob ;)

Hello

The package.json snippet is missing in https://github.com/christianalfoni/react-webpack-cookbook/wiki/Running-a-workflow

I'm running Ubuntu 14.04

Here is a screenshot

I made the file structure as the book described and copy and pasted the code. I tried many variations to try to get it to find the main.js file but it won't. I have made this work before by putting the entry file in the root folder.

https://christianalfoni.github.io/react-webpack-cookbook/Inlining-fonts.html says "Depending on your project you might be able to get away with one font format. If you exclude Opera Mini, all browsers support the .woff and .svg format" but the SVG format is a dead format, and virtually everyone stopped supporting it quite a while ago. Only safari still supports it, but we found really obvious flaws in the SVG format fairly long ago, and it was shelved as "useless compared to real fonts". http://caniuse.com/#search=svg%20font is a good resource to check, here.

Everything does support WOFF though, so at this point (early 2016), with Microsoft having literally abandoned all IE versions that don't support WOFF, you just need one format. (and WOFF2 if you want to be ahead of the curve)

Have to finish to section

https://github.com/webpack/file-loader is mentioned as a loader that can automatically update your index.html with the new hash

Adopt code to React 0.14. (separate react-dom module)

Hi

In my main.s js I am using the import syntax

import './Component.jsx';

When I run 'npm run dev' I get the following error:

ERROR in ./app/main.js
Module parse failed: /Users/aoshi_1/Desktop/test_webpack/app/main.js Line 2: Unexpected reserved word
You may need an appropriate loader to handle this file type.
| 'use strict';
| import './Component.jsx';
|
|

This is my config setup

var path = require('path');
var config = {
entry: path.resolve(__dirname, 'app/main.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /.jsx$/, // A regexp to test the require path
loader: 'jsx' // The module to load. "jsx" is short for "jsx-loader"
}]
}
};

module.exports = config;

thanks

I just got a tip it should be possible to set up gh-pages to update by subscribing to gollum webhook.

In our case it would have to trigger npm run gitbook && npm run deploy.

@christianalfoni Do you have experience with webhooks?

I believe this is something that would be of benefit to a lot of people.

As a new user one of the biggest challenges I find in using webpack is producing all the permutations of output in a single configuration. It would be great to see an example of a configuration that supports script and npm packaging of a library as is described using Browserify in this blog post:
http://krasimirtsonev.com/blog/article/distributing-react-components-babel-browserify-webpack-uglifyjs

Thanks for this very helpful cookbook.

hey, it seems absolute import doesnt work for me. what happens is that webpack translates the require('/whatever') to a url, and my server tries to load it, instead of webpack importing it.
https://github.com/christianalfoni/react-webpack-cookbook/wiki/Requiring-files

entry: [
'./client/scripts/index.js',
'webpack-hot-middleware/client',
],