Adding Hot Module Replacement support

bin/encore.js

@@ -65,6 +65,7 @@ function showUsageInstructions() {
     console.log(`    ${chalk.green('dev-server')} : runs webpack-dev-server`);
     console.log(`       - ${chalk.yellow('--host')} The hostname/ip address the webpack-dev-server will bind to`);
     console.log(`       - ${chalk.yellow('--port')} The port the webpack-dev-server will bind to`);
+    console.log(`       - ${chalk.yellow('--hot')}  Enable HMR on webpack-dev-server`);
     console.log('       - Supports any webpack-dev-server options');
     console.log(`    ${chalk.green('production')} : runs webpack for production`);
     console.log('       - Supports any webpack options (e.g. --watch)');

lib/WebpackConfig.js

@@ -245,6 +245,10 @@ class WebpackConfig {
         return this.runtimeConfig.devServerHttps;
     }
 
+    useHotModuleReplacementPlugin() {
+        return this.runtimeConfig.useHotModuleReplacement;
+    }
+
     isProduction() {
         return this.runtimeConfig.environment === 'production';
     }

lib/config-generator.js

@@ -413,6 +413,10 @@ class ConfigGenerator {
         const outputPath = this.webpackConfig.outputPath.replace(this.webpackConfig.getContext() + '/', '');
         plugins.push(new AssetsOutputDisplayPlugin(outputPath, friendlyErrorsPlugin));
 
+        if (this.webpackConfig.useDevServer()) {
+            plugins.push(new webpack.HotModuleReplacementPlugin());
+        }
+
         return plugins;
     }
 
@@ -463,6 +467,7 @@ class ConfigGenerator {
             // avoid CORS concerns trying to load things like fonts from the dev server
             headers: { 'Access-Control-Allow-Origin': '*' },
             // required by FriendlyErrorsWebpackPlugin
+            hot: this.webpackConfig.useHotModuleReplacementPlugin(),
             quiet: true,
             compress: true,
             historyApiFallback: true,

lib/config/RuntimeConfig.js

@@ -19,6 +19,7 @@ class RuntimeConfig {
         this.useDevServer = null;
         this.devServerUrl = null;
         this.devServerHttps = null;
+        this.useHotModuleReplacement = null;
 
         this.babelRcFileExists = null;
 

lib/config/parse-runtime.js

@@ -23,6 +23,7 @@ module.exports = function(argv, cwd) {
     const runtimeConfig = new RuntimeConfig();
     runtimeConfig.command = argv._[0];
     runtimeConfig.useDevServer = false;
+    runtimeConfig.useHotModuleReplacement = false;
 
     switch (runtimeConfig.command) {
         case 'dev':
@@ -38,6 +39,7 @@ module.exports = function(argv, cwd) {
             runtimeConfig.environment = 'dev';
             runtimeConfig.useDevServer = true;
             runtimeConfig.devServerHttps = argv.https;
+            runtimeConfig.useHotModuleReplacement = argv.hot || false;
 
             var host = argv.host ? argv.host : 'localhost';
             var port = argv.port ? argv.port : '8080';

test/config/parse-runtime.js

@@ -68,6 +68,7 @@ describe('parse-runtime', () => {
         expect(config.environment).to.equal('dev');
         expect(config.useDevServer).to.be.true;
         expect(config.devServerUrl).to.equal('http://localhost:8080/');
+        expect(config.useHotModuleReplacement).to.be.false;
     });
 
     it('dev-server command with options', () => {
@@ -105,4 +106,12 @@ describe('parse-runtime', () => {
 
         expect(config.babelRcFileExists).to.be.true;
     });
+
+    it('dev-server command hot', () => {
+        const testDir = createTestDirectory();
+        const config = parseArgv(createArgv(['dev-server', '--hot']), testDir);
+
+        expect(config.useDevServer).to.be.true;
+        expect(config.useHotModuleReplacement).to.be.true;
+    });
 });