React Hot Loader sample description

docker_setting

    browserSync({
        port: 3006,
        ・・・

entry

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

getEntries

function getEntries() {
  let entries = {};
  // hot reload用設定
  const devClient = [
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client',
  ];
  // entrypoint毎にhot reload用設定を付加する
  config.react.map((app_name) => {
    entries[`react_${app_name}`] = [...devClient, `./js/react/${app_name}/app.js`];
  });
  return entries;
}

module

    module: {
        loaders: [
            {
                loaders: ['react-hot-loader', 'babel-loader'],
                test: /\.js?$/,
                exclude: /node_modules/,
                include: [src],
            },
        ]
    },

multiple_entrypoints

    entry : {
        app1: ['./app1/index.js', 'webpack/hot/dev-server', 'webpack-hot-middleware/client'],
        app2: ['./app2/index.js', 'webpack/hot/dev-server', 'webpack-hot-middleware/client'],
    },
    output: {
        path: dist,
        publicPath: '/dist/',
        filename: '[name].bundle.js'
    },

plugins

    plugins: [
        new webpack.LoaderOptionsPlugin({
            debug: true
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ]

setting_for_vitrualbox

import gulp from "gulp";
import webpack from "webpack";
import browserSync from 'browser-sync';
import webpackDevMiddleware from "webpack-dev-middleware";
import webpackHotMiddleware from "webpack-hot-middleware";
import webpackConfig from "./webpack.config.js";
import proxyMiddleware from 'http-proxy-middleware';


gulp.task("watch", () => {
    const bundler = webpack(webpackConfig);
    const proxy = proxyMiddleware('/', {target: 'http://{ゲストOSのIPアドレス}'});
    browserSync({
        server: {
            baseDir: "./",
            port: 3000,
            middleware: [
                webpackDevMiddleware(bundler, {
                    publicPath: webpackConfig.output.publicPath,
                    stats: { colors: true },
                    watchOptions: {
                        poll: true,
                        ignored: /node_modules/
                    }
                }),
                webpackHotMiddleware(bundler),
                proxy,
            ]
        },
        files: [
            '*.css',
            '*.html'
        ],
    });
});