diff --git a/bin/encore.js b/bin/encore.js index 49378e02..73087d4f 100755 --- a/bin/encore.js +++ b/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)'); diff --git a/lib/WebpackConfig.js b/lib/WebpackConfig.js index 321dba6d..a8d047af 100644 --- a/lib/WebpackConfig.js +++ b/lib/WebpackConfig.js @@ -245,6 +245,10 @@ class WebpackConfig { return this.runtimeConfig.devServerHttps; } + useHotModuleReplacementPlugin() { + return this.runtimeConfig.useHotModuleReplacement; + } + isProduction() { return this.runtimeConfig.environment === 'production'; } diff --git a/lib/config-generator.js b/lib/config-generator.js index 83bdeb71..52aa29e5 100644 --- a/lib/config-generator.js +++ b/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, diff --git a/lib/config/RuntimeConfig.js b/lib/config/RuntimeConfig.js index 932e17de..37ed2ee9 100644 --- a/lib/config/RuntimeConfig.js +++ b/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; diff --git a/lib/config/parse-runtime.js b/lib/config/parse-runtime.js index 73ac5d7f..56403c8b 100644 --- a/lib/config/parse-runtime.js +++ b/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'; diff --git a/test/config/parse-runtime.js b/test/config/parse-runtime.js index c36c1e18..c433e4e6 100644 --- a/test/config/parse-runtime.js +++ b/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; + }); });