Skip to content

Update webpack-dev-server config to work with version 4 #3122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 25, 2021
Merged

Update webpack-dev-server config to work with version 4 #3122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
31d0fbe
Update webpack-dev-server config for version 4
t27duck Jul 24, 2021
f2af237
Allow more settings for devServer.client
t27duck Aug 20, 2021
c5dc692
Set liveReload to inverse of hot
t27duck Aug 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 12 additions & 11 deletions lib/install/config/webpacker.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,25 +24,26 @@ development:
https: false
host: localhost
port: 3035
public: localhost:3035
# Hot Module Replacement updates modules while the application is running without a full reload
hmr: false
# Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
overlay: true
client:
# Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
overlay: true
# May also be a string
# webSocketURL:
# hostname: "0.0.0.0"
# pathname: "/ws"
# port: 8080
# Should we use gzip compression?
compress: true
# Note that apps that do not check the host are vulnerable to DNS rebinding attacks
disable_host_check: true
# This option lets the browser open with your local IP
use_local_ip: false
# When enabled, nothing except the initial startup information will be written to the console.
# This also means that errors or warnings from webpack are not visible.
quiet: false
allowed_hosts: "all"
pretty: true
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
static:
watch:
ignored: '**/node_modules/**'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@t27duck @guillaumebriday Do we need to be on the lookout for changes to the webpacker.yml file as updating this won't be obvious to current installations? Surely not existing beta users. I guess we'll need to double check the upgrade docs one final time before the final release.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I will open a PR for that to update the upgrade.md file. 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@justin808 what I've been telling people in the various discords and slacks I'm in is to treat it like the "upgrade" from 5 to the betas where you back up the original file, take the new default from the gem, and reapply any custom changes.


test:
<<: *default
Expand Down
2 changes: 1 addition & 1 deletion package/__tests__/development.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ describe('Development environment', () => {
devServer: {
host: 'localhost',
port: 3035,
injectClient: false
hot: false
}
})
})
Expand Down
62 changes: 34 additions & 28 deletions package/environments/development.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,35 +18,41 @@ if (runningWebpackDevServer) {
})
}

devConfig = merge(devConfig, {
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 || devServer.hmr,
injectClient: devServer.hmr,
injectHot: devServer.hmr,
useLocalIp: devServer.use_local_ip,
public: devServer.public,
publicPath,
historyApiFallback: { disableDotRule: true },
headers: devServer.headers,
overlay: devServer.overlay,
stats: {
colors: true,
entrypoints: false,
errorDetails: true,
modules: false,
moduleTrace: false
},
watchOptions: devServer.watch_options
const devServerConfig = {
devMiddleware: {
publicPath
},
compress: devServer.compress,
allowedHosts: devServer.allowed_hosts,
host: devServer.host,
port: devServer.port,
https: devServer.https,
hot: devServer.hmr,
liveReload: !devServer.hmr,
historyApiFallback: { disableDotRule: true },
headers: devServer.headers,
static: {
publicPath: contentBase
}
}

if (devServer.static) {
devServerConfig.static = { ...devServerConfig.static, ...devServer.static }
}

if (devServer.client) {
devServerConfig.client = devServer.client
}

devConfig = merge(devConfig, {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't this override all local (user-side) changes to the config though? We're trying to change this config and our changes keep getting overridden by defaults.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What specific changes are you trying to make that are being overridden? I was under the impression that merge would more or less take the existing devConfig which is from the yaml file and stick on the stats and devServer values.

From what I can see, this is a similar pattern to webpacker 4 (old line 21 of this diff)

stats: {
colors: true,
entrypoints: false,
errorDetails: true,
modules: false,
moduleTrace: false
},
devServer: devServerConfig
})
}

Expand Down