Skip to content

Fixing support for webpack-dev-server v4 #899

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
weaverryan merged 1 commit into from
Jan 28, 2021
Merged

Fixing support for webpack-dev-server v4 #899

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
* `terser-webpack-plugin` from 1 to 5
* `webpack-cli` from 3 to 4
* `webpack-manifest-plugin` from 2 to 3
* `webpack-manifest-plugin` from 3 to 4-beta
* `webpack-dev-server` from 3 to 4-beta [CHANGELOG](https://github.com/webpack/webpack-dev-server/blob/master/CHANGELOG.md#400-beta0-2020-11-27)

* [DEPENDENCY SUPPORT CHANGES] Encore has changed what versions it supports
of the following packages:
Expand Down
1 change: 0 additions & 1 deletion bin/encore.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@ 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(` - ${chalk.yellow('--keep-public-path')} Do not change the public path (it is usually prefixed by the dev server URL)`);
console.log(' - Supports any webpack-dev-server options');
console.log();
Expand Down
4 changes: 0 additions & 4 deletions lib/WebpackConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -995,10 +995,6 @@ class WebpackConfig {
return this.runtimeConfig.devServerHttps;
}

useHotModuleReplacementPlugin() {
return this.runtimeConfig.useHotModuleReplacement;
}

isProduction() {
return this.runtimeConfig.environment === 'production';
}
Expand Down
12 changes: 5 additions & 7 deletions lib/config-generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -570,17 +570,15 @@ class ConfigGenerator {
const contentBase = pathUtil.getContentBase(this.webpackConfig);

const devServerOptions = {
contentBase: contentBase,
// this doesn't appear to be necessary, but here in case
publicPath: this.webpackConfig.getRealPublicPath(),
static: {
directory: contentBase,
// this doesn't appear to be necessary, but here in case
publicPath: this.webpackConfig.getRealPublicPath(),
},
// avoid CORS concerns trying to load things like fonts from the dev server
headers: { 'Access-Control-Allow-Origin': '*' },
hot: this.webpackConfig.useHotModuleReplacementPlugin(),
// required by FriendlyErrorsWebpackPlugin
quiet: true,
compress: true,
historyApiFallback: true,
watchOptions: this.buildWatchOptionsConfig(),
Copy link
Member Author

@weaverryan weaverryan Jan 28, 2021

Choose a reason for hiding this comment

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

This now lives under static.watch. However, it automatically reads the root-level watchOptions config and uses that as its defaults - https://github.com/webpack/webpack-dev-server/blob/788f2ba7d9152610ba0d3024f0079c98aad86991/lib/utils/normalizeOptions.js#L9-L23 - so we don't need to re-set the options here also.

https: this.webpackConfig.useDevServerInHttps()
};

Expand Down
1 change: 0 additions & 1 deletion lib/config/RuntimeConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ class RuntimeConfig {
this.devServerUrl = null;
this.devServerHttps = null;
this.devServerKeepPublicPath = false;
this.useHotModuleReplacement = false;
this.outputJson = false;
this.profile = false;

Expand Down
1 change: 0 additions & 1 deletion lib/config/parse-runtime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ module.exports = function(argv, cwd) {

runtimeConfig.useDevServer = true;
runtimeConfig.devServerHttps = argv.https;
runtimeConfig.useHotModuleReplacement = argv.hot || false;
Copy link
Member Author

@weaverryan weaverryan Jan 28, 2021

Choose a reason for hiding this comment

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

hot now defaults to true. So there is no option at the command line and no need for us to set anything.

runtimeConfig.devServerKeepPublicPath = argv.keepPublicPath || false;

if (typeof argv.public === 'string') {
Expand Down
80 changes: 0 additions & 80 deletions test/config-generator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -613,33 +613,6 @@ describe('The config-generator function', () => {
expect(actualConfig.devServer).to.be.undefined;
});

it('devServer no hot mode', () => {
const config = createConfig();
config.runtimeConfig.useDevServer = true;
config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
config.runtimeConfig.useHotModuleReplacement = false;
config.outputPath = isWindows ? 'C:\\tmp\\public' : '/tmp/public';
config.setPublicPath('/');
config.addEntry('main', './main');

const actualConfig = configGenerator(config);
expect(actualConfig.devServer).to.not.be.undefined;
expect(actualConfig.devServer.hot).to.be.false;
});

it('hot mode', () => {
const config = createConfig();
config.runtimeConfig.useDevServer = true;
config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
config.runtimeConfig.useHotModuleReplacement = true;
config.outputPath = isWindows ? 'C:\\tmp\\public' : '/tmp/public';
config.setPublicPath('/');
config.addEntry('main', './main');

const actualConfig = configGenerator(config);
expect(actualConfig.devServer.hot).to.be.true;
});

it('devServer with custom options', () => {
const config = createConfig();
config.runtimeConfig.useDevServer = true;
Expand All @@ -664,59 +637,6 @@ describe('The config-generator function', () => {
},
});
});

it('devServer with custom watch options', () => {
const config = createConfig();
config.runtimeConfig.useDevServer = true;
config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
config.runtimeConfig.useHotModuleReplacement = true;
config.outputPath = isWindows ? 'C:\\tmp\\public' : '/tmp/public';
config.setPublicPath('/');
config.addEntry('main', './main');

config.configureWatchOptions(watchOptions => {
watchOptions.poll = 250;
});

const actualConfig = configGenerator(config);

expect(actualConfig.watchOptions).to.deep.equals({
'ignored': /node_modules/,
'poll': 250,
});
expect(actualConfig.devServer.watchOptions).to.deep.equals({
'ignored': /node_modules/,
'poll': 250,
});
});

it('devServer with custom options and watch options', () => {
const config = createConfig();
config.runtimeConfig.useDevServer = true;
config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
config.runtimeConfig.useHotModuleReplacement = true;
config.outputPath = isWindows ? 'C:\\tmp\\public' : '/tmp/public';
config.setPublicPath('/');
config.addEntry('main', './main');

config.configureWatchOptions(watchOptions => {
watchOptions.poll = 250;
});
config.configureDevServerOptions(options => {
// should take precedence over `configureWatchOptions()`
options.watchOptions.poll = 500;
});

const actualConfig = configGenerator(config);
expect(actualConfig.watchOptions).to.deep.equals({
'ignored': /node_modules/,
'poll': 250,
});
expect(actualConfig.devServer.watchOptions).to.deep.equals({
'ignored': /node_modules/,
'poll': 500,
});
});
});

describe('test for addPlugin config', () => {
Expand Down
9 changes: 0 additions & 9 deletions test/config/parse-runtime.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ 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;
expect(config.devServerKeepPublicPath).to.be.false;
});

Expand Down Expand Up @@ -132,14 +131,6 @@ 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;
});

it('dev-server command --keep-public-path', () => {
const testDir = createTestDirectory();
const config = parseArgv(createArgv(['dev-server', '--keep-public-path']), testDir);
Expand Down