Setup Webpack

Before continuing make sure you have a recent build of node.js. Type node -v to check. The node.js version should be 4 or higher.

Install Webpack

Run npm init. This will create a package.json with our node dependencies.

Next, run npm i webpack --save-dev. This will install Webpack in node_modules/.bin/webpack and add Webpack as a dependency.

We do not want to write node_modules/.bin/webpack each time we run Webpack. We will instead create a "script" in our package.json. Node knows where the packages are and will find them without specifying the full path. By adding the snippet below we can now invoke Webpack by typing npm run build.

package.json

"scripts": {
    "build": "webpack"
}

Running this command at this point will result in an error. This is expected.

Create a Webpack configuration

Before we continue we will need to install some additional node packages. webpack-dev-server runs a server which loads our assets in development. react-hot-loader enables live editing of React components. babel-loader adds support for ES6 in our React components. react installs all React libraries.

• npm i webpack-dev-server --save
• npm i react-hot-loader --save
• npm i babel-loader --save
• npm i react --save

webpack.config.js

Next, let's create a webpack.config.js file in the root of our project. This is the default file name for Webpack looks for.

var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.join(__dirname, 'node_modules');

var config = {
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:3000',
        'webpack/hot/only-dev-server',
        './app/Resources/js/app.js',
    ],
    output: {
        path: path.join(__dirname, 'web/dist'),
        filename: 'bundle.js',
        publicPath: 'http://127.0.0.1:3000/static/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                include: path.join(__dirname, 'app/Resources/js'),
                loader: 'react-hot!babel'
            }
        ]
    }
};

module.exports = config;

webpack.dev-server.js

We will also create a file named webpack.dev-server.js. This file will create an instance of webpack-dev-server and start a server which serves our assets from http://127.0.0.1:3000. Note that webpack.dev-server.js imports our base configuration in webpack.config.js.

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(
    webpack(config),
    {
        publicPath: config.output.publicPath,
        hot: true,
        quiet: false,
        noInfo: false,
        historyApiFallback: true
    }
).listen(
    3000,
    '0.0.0.0',
    function (err, result) {
        if (err) {
            console.log(err);
        }
        console.log('Listening at 0.0.0.0:3000');
    }
);

packages.json

We can now run node webpack.dev-server.js in order to start our development server. Lets create a "script" in packages.json which allows us to start the development server by typing npm run start.

  "scripts": {
    "start": "node webpack.dev-server.js",
    "build": "webpack"
  },

Running this command at this point will result in an error because we haven't created our /app/Resources/js/app.js yet.