From e84e34f890f8a6e1b36d38bbe0bd414f936177f2 Mon Sep 17 00:00:00 2001 From: Justin Gordon Date: Wed, 8 Jul 2020 21:55:20 -1000 Subject: [PATCH] Only include dev-server parts if for dev server (#2644) * Only include dev-server parts if for dev server Without this change, webpack still includes things like window in the build even if not using the webpack-dev-server. When that happens, the bundle cannot be used for server-side rendering. * Linting * Add jest test --- package/__tests__/development.js | 15 +++++- package/environments/development.js | 72 ++++++++++++++++------------- 2 files changed, 53 insertions(+), 34 deletions(-) diff --git a/package/__tests__/development.js b/package/__tests__/development.js index bd1f1e8e1..0ba24270a 100644 --- a/package/__tests__/development.js +++ b/package/__tests__/development.js @@ -11,9 +11,10 @@ describe('Development environment', () => { describe('toWebpackConfig', () => { beforeEach(() => jest.resetModules()) - test('should use development config and environment', () => { + test('should use development config and environment including devServer if WEBPACK_DEV_SERVER', () => { process.env.RAILS_ENV = 'development' process.env.NODE_ENV = 'development' + process.env.WEBPACK_DEV_SERVER = 'YES' const { environment } = require('../index') const config = environment.toWebpackConfig() @@ -26,5 +27,17 @@ describe('Development environment', () => { } }) }) + + test('should use development config and environment if WEBPACK_DEV_SERVER', () => { + process.env.RAILS_ENV = 'development' + process.env.NODE_ENV = 'development' + process.env.WEBPACK_DEV_SERVER = undefined + const { environment } = require('../index') + + const config = environment.toWebpackConfig() + expect(config.output.path).toEqual(resolve('public', 'packs')) + expect(config.output.publicPath).toEqual('/packs/') + expect(config.devServer).toEqual(undefined) + }) }) }) diff --git a/package/environments/development.js b/package/environments/development.js index 361efeb8d..7808fb264 100644 --- a/package/environments/development.js +++ b/package/environments/development.js @@ -7,41 +7,47 @@ module.exports = class extends Base { constructor() { super() - if (devServer.hmr) { - this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin()) - this.config.output.filename = '[name]-[hash].js' - } - this.config.merge({ mode: 'development', - devtool: 'cheap-module-source-map', - devServer: { - clientLogLevel: 'none', - compress: devServer.compress, - quiet: devServer.quiet, - disableHostCheck: devServer.disable_host_check, - host: devServer.host, - port: devServer.port, - https: devServer.https, - hot: devServer.hmr, - contentBase, - inline: devServer.inline, - useLocalIp: devServer.use_local_ip, - public: devServer.public, - publicPath, - historyApiFallback: { - disableDotRule: true - }, - headers: devServer.headers, - overlay: devServer.overlay, - stats: { - entrypoints: false, - errorDetails: true, - modules: false, - moduleTrace: false - }, - watchOptions: devServer.watch_options - } + devtool: 'cheap-module-source-map' }) + + if (process.env.WEBPACK_DEV_SERVER + && process.env.WEBPACK_DEV_SERVER !== 'undefined') { + if (devServer.hmr) { + this.plugins.append('HotModuleReplacement', new webpack.HotModuleReplacementPlugin()) + this.config.output.filename = '[name]-[hash].js' + } + + this.config.merge({ + devServer: { + clientLogLevel: 'none', + compress: devServer.compress, + quiet: devServer.quiet, + disableHostCheck: devServer.disable_host_check, + host: devServer.host, + port: devServer.port, + https: devServer.https, + hot: devServer.hmr, + contentBase, + inline: devServer.inline, + useLocalIp: devServer.use_local_ip, + public: devServer.public, + publicPath, + historyApiFallback: { + disableDotRule: true + }, + headers: devServer.headers, + overlay: devServer.overlay, + stats: { + entrypoints: false, + errorDetails: true, + modules: false, + moduleTrace: false + }, + watchOptions: devServer.watch_options + } + }) + } } }