From 43f7dbffdc794e576a19bfbc96796ef1b7fdff1e Mon Sep 17 00:00:00 2001 From: ColCh Date: Sat, 27 Sep 2014 19:23:34 +0400 Subject: [PATCH 1/4] Add and use Hot Module Replacement plugin and react-hot-loader --- templates/common/Gruntfile.js | 1 + templates/common/_package.json | 3 ++- templates/common/root/webpack.config.js | 14 +++++++++++--- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/templates/common/Gruntfile.js b/templates/common/Gruntfile.js index add91c7..36e9817 100644 --- a/templates/common/Gruntfile.js +++ b/templates/common/Gruntfile.js @@ -27,6 +27,7 @@ module.exports = function (grunt) { 'webpack-dev-server': { options: { + hot: true, port: 8000, webpack: webpackDevConfig, publicPath: '/assets/', diff --git a/templates/common/_package.json b/templates/common/_package.json index 7b1b70f..5c5a970 100644 --- a/templates/common/_package.json +++ b/templates/common/_package.json @@ -11,7 +11,8 @@ "mainOutput": "main", "dependencies": {<% if (reactRouter) { %> "react-router": "^0.7.0",<% } %> - "react": "~0.11.2" + "react": "~0.11.2", + "react-hot-loader": "^0.4.5" }, "devDependencies": { "grunt": "~0.4.5", diff --git a/templates/common/root/webpack.config.js b/templates/common/root/webpack.config.js index 1235f53..7a50f8f 100644 --- a/templates/common/root/webpack.config.js +++ b/templates/common/root/webpack.config.js @@ -6,6 +6,7 @@ */ 'use strict'; +var webpack = require('webpack'); module.exports = { @@ -17,7 +18,10 @@ module.exports = { cache: true, debug: true, devtool: false, - entry: './src/scripts/components/<%= pkg.mainInput %>.jsx', + entry: [ + 'webpack/hot/dev-server', + './src/scripts/components/<%= pkg.mainInput %>.jsx' + ], stats: { colors: true, @@ -37,7 +41,7 @@ module.exports = { loaders: [{ test: /\.jsx$/, - loader: 'jsx-loader?harmony' + loader: 'react-hot!jsx-loader?harmony' }, { test: /\.css$/, loader: 'style-loader!css-loader' @@ -45,6 +49,10 @@ module.exports = { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }] - } + }, + + plugins: [ + new webpack.HotModuleReplacementPlugin() + ] }; From 18ff31dd616e64626502972ebfff0459201adf29 Mon Sep 17 00:00:00 2001 From: ColCh Date: Mon, 29 Sep 2014 19:19:01 +0400 Subject: [PATCH 2/4] Move react-hot-loader to devDependencies --- templates/common/_package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/common/_package.json b/templates/common/_package.json index 5c5a970..3a186b6 100644 --- a/templates/common/_package.json +++ b/templates/common/_package.json @@ -11,8 +11,7 @@ "mainOutput": "main", "dependencies": {<% if (reactRouter) { %> "react-router": "^0.7.0",<% } %> - "react": "~0.11.2", - "react-hot-loader": "^0.4.5" + "react": "~0.11.2" }, "devDependencies": { "grunt": "~0.4.5", @@ -36,6 +35,7 @@ "grunt-open": "~0.2.3", "jshint-loader": "~0.8.0", "grunt-contrib-copy": "~0.5.0", - "grunt-contrib-clean": "~0.6.0" + "grunt-contrib-clean": "~0.6.0", + "react-hot-loader": "^0.4.5" } } From 19a2eb963abd1e2348d46ad264a80016ee16ad1b Mon Sep 17 00:00:00 2001 From: ColCh Date: Mon, 29 Sep 2014 19:19:20 +0400 Subject: [PATCH 3/4] Add simple tests for HMR usage --- test/test-creation.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/test/test-creation.js b/test/test-creation.js index e9e589b..1b44c5e 100644 --- a/test/test-creation.js +++ b/test/test-creation.js @@ -3,6 +3,7 @@ var path = require('path'); var helpers = require('yeoman-generator').test; +var assert = require('yeoman-generator').assert; var _ = require('underscore.string'); describe('react-webpack generator', function() { @@ -93,6 +94,19 @@ describe('react-webpack generator', function() { }); }); + it('should use HMR webpack API inside of configs', function (done) { + react.run({}, function() { + assert.fileContent([ + ['package.json', /react-hot-loader/], + ['Gruntfile.js', /hot:\s*true/], + ['webpack.config.js', /react-hot/], + ['webpack.config.js', /webpack\.HotModuleReplacementPlugin/], + ['webpack.config.js', /webpack\/hot\/dev-server/] + ]); + done(); + }); + }); + }); describe('Subgenerators', function() { From 026455c4e710c50bdba5d5e7aec95048bc94b4ea Mon Sep 17 00:00:00 2001 From: ColCh Date: Mon, 29 Sep 2014 19:32:18 +0400 Subject: [PATCH 4/4] Backport https://github.com/gaearon/react-hot-boilerplate/commit/58dddfd80d7a39083195a8da68849b5c898d9e8c --- templates/common/root/webpack.config.js | 5 +++-- test/test-creation.js | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/templates/common/root/webpack.config.js b/templates/common/root/webpack.config.js index 7a50f8f..4c69e48 100644 --- a/templates/common/root/webpack.config.js +++ b/templates/common/root/webpack.config.js @@ -19,7 +19,7 @@ module.exports = { debug: true, devtool: false, entry: [ - 'webpack/hot/dev-server', + 'webpack/hot/only-dev-server', './src/scripts/components/<%= pkg.mainInput %>.jsx' ], @@ -52,7 +52,8 @@ module.exports = { }, plugins: [ - new webpack.HotModuleReplacementPlugin() + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin() ] }; diff --git a/test/test-creation.js b/test/test-creation.js index 1b44c5e..b006aa5 100644 --- a/test/test-creation.js +++ b/test/test-creation.js @@ -101,7 +101,8 @@ describe('react-webpack generator', function() { ['Gruntfile.js', /hot:\s*true/], ['webpack.config.js', /react-hot/], ['webpack.config.js', /webpack\.HotModuleReplacementPlugin/], - ['webpack.config.js', /webpack\/hot\/dev-server/] + ['webpack.config.js', /webpack\.NoErrorsPlugin/], + ['webpack.config.js', /webpack\/hot\/only-dev-server/] ]); done(); });