8000 feat: Upgrade webpack to version 5 (2.12) (#21375) · vaadin/flow@e44c91a · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit e44c91a

Browse files
mcollovatimcollovati
authored
feat: Upgrade webpack to version 5 (2.12) (#21375)
Updated webpack to version 5 Replaces file-loader with Webpack 5 assets feature, as recommanded in the migration guide Bumps several npm dependencies Update webpack configuration to correctly handle /VAADIN public path both in dev and prod modes. Update flow Javascript plugins to adapt to webpack dependencies changes Part of #21334
1 parent 4e53228 commit e44c91a

File tree

15 files changed

+205
-132
lines changed

15 files changed

+205
-132
lines changed

‎flow-maven-plugin/src/test/java/com/vaadin/flow/plugin/maven/PrepareFrontendMojoTest.java

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
import java.util.Collections;
88
import java.util.List;
99

10-
import com.vaadin.flow.server.frontend.FrontendTools;
11-
import com.vaadin.flow.server.frontend.installer.NodeInstaller;
1210
import org.apache.maven.plugin.MojoExecutionException;
1311
import org.apache.maven.plugin.MojoFailureException;
1412
import org.apache.maven.project.MavenProject;
@@ -24,10 +22,13 @@
2422

2523
import com.vaadin.flow.plugin.TestUtils;
2624
import com.vaadin.flow.server.Constants;
25+
import com.vaadin.flow.server.frontend.FrontendTools;
26+
import com.vaadin.flow.server.frontend.installer.NodeInstaller;
2727

2828
import elemental.json.Json;
2929
import elemental.json.JsonObject;
3030
import elemental.json.impl.JsonUtil;
31+
3132
import static com.vaadin.flow.plugin.maven.BuildFrontendMojoTest.assertContainsPackage;
3233
import static com.vaadin.flow.plugin.maven.BuildFrontendMojoTest.getPackageJson;
3334
import static com.vaadin.flow.plugin.maven.BuildFrontendMojoTest.setProject;
@@ -212,8 +213,8 @@ private void assertPackageJsonContent() throws IOException {
212213
"@webcomponents/webcomponentsjs", "@polymer/polymer");
213214

214215
assertContainsPackage(packageJsonObject.getObject("devDependencies"),
215-
"webpack", "webpack-cli", "webpack-dev-server",
216-
"webpack-babel-multi-target-plugin", "copy-webpack-plugin");
216+
"webpack", "webpack-cli", "webpack-dev-server", "mkdirp",
217+
"copy-webpack-plugin");
217218
}
218219

219220
private List<File> gatherFiles(File root) {

‎flow-server/src/main/java/com/vaadin/flow/server/DevModeHandler.java

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,15 @@ public final class DevModeHandler implements RequestHandler {
9393
private static final Pattern WEBPACK_ILLEGAL_CHAR_PATTERN = Pattern
9494
.compile("\"|%22");
9595
// It's not possible to know whether webpack is ready unless reading output
96-
// messages. When webpack finishes, it writes either a `Compiled` or a
97-
// `Failed` in the last line
98-
private static final String DEFAULT_OUTPUT_PATTERN = ": Compiled.";
99-
private static final String DEFAULT_ERROR_PATTERN = ": Failed to compile.";
96+
// messages. When webpack finishes, it writes either a `compiled` or a
97+
// `compiled with error` in the last line
98+
// Webpack output can be
99+
// webpack 5.51.1 compiled successfully in 27409ms
100+
// webpack 5.51.1 compiled with 34 errors in 42936ms
101+
// webpack 5.51.1 compiled with 2 warnings in 1233ms
102+
// webpack 5.51.1 compiled with 1 error and 1 warning in 7110 ms
103+
private static final String DEFAULT_OUTPUT_PATTERN = "webpack .* compiled .* in .*ms";
104+
private static final String DEFAULT_ERROR_PATTERN = "webpack .* compiled with .* error.* in .* ms";
100105
private static final String FAILED_MSG = "\n------------------ Frontend compilation failed. -----------------";
101106
private static final String SUCCEED_MSG = "\n----------------- Frontend compiled successfully. -----------------";
102107
private static final String START = "\n------------------ Starting Frontend compilation. ------------------\n";
@@ -686,11 +691,10 @@ private boolean doStartWebpack(DeploymentConfiguration config,
686691
SERVLET_PARAMETER_DEVMODE_WEBPACK_TIMEOUT,
687692
DEFAULT_TIMEOUT_FOR_PATTERN)));
688693
}
689-
690694
if (!webpackProcess.get().isAlive()) {
691-
getLogger().error(
692-
String.format("Webpack failed with the exception:%n%s",
693-
cumulativeOutput.toString()));
695+
getLogger().error("Webpack failed ({}) with the exception:\n{}",
696+
webpackProcess.get().exitValue(),
697+
cumulativeOutput.toString());
694698
throw new IllegalStateException("Webpack exited prematurely");
695699
}
696700

@@ -724,13 +728,12 @@ private List<String> makeCommands(DeploymentConfiguration config,
724728
command.add(webpackConfig.getAbsolutePath());
725729
command.add("--port");
726730
command.add(String.valueOf(port));
727-
// Workaround for issue with Node 17 webpack dev server denying
728-
// request to localhost. See https://github.com/vaadin/flow/issues/12546
729-
command.add("--host=127.0.0.1");
731+
// Tell wds to stop even if watchDog fail
732+
command.add("--watch-options-stdin");
730733

731734
command.addAll(Arrays.asList(config
732735
.getStringProperty(SERVLET_PARAMETER_DEVMODE_WEBPACK_OPTIONS,
733-
"-d --inline=false")
736+
"--devtool=eval-source-map")
734737
.split(" +")));
735738
return command;
736739
}

‎flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -317,32 +317,30 @@ static Map<String, String> getDefaultDependencies() {
317317
static Map<String, String> getDefaultDevDependencies() {
318318
Map<String, String> defaults = new HashMap<>();
319319

320-
defaults.put("webpack", "4.47.0");
321-
defaults.put("webpack-cli", "3.3.11");
322-
defaults.put("webpack-dev-server", "3.11.0");
323-
defaults.put("webpack-babel-multi-target-plugin", "2.5.0");
320+
defaults.put("webpack", "5.99.6");
321+
defaults.put("webpack-cli", "6.0.1");
322+
defaults.put("webpack-dev-server", "5.2.1");
324323
// Defining loader until a resolution exists to issue
325324
// https://github.com/DanielSchaffer/webpack-babel-multi-target-plugin/issues/94
326-
defaults.put("babel-loader", "8.2.2");
325+
defaults.put("babel-loader", "10.0.0");
326+
defaults.put("@babel/preset-env", "7.27.1");
327327
// Defining html-webpack-plugin due to same issue as babel-loader
328-
defaults.put("html-webpack-plugin", "4.5.2");
329-
defaults.put("copy-webpack-plugin", "5.1.2");
330-
defaults.put("compression-webpack-plugin", "4.0.1");
328+
defaults.put("html-webpack-plugin", "5.6.3");
329+
defaults.put("copy-webpack-plugin", "13.0.0");
330+
defaults.put("compression-webpack-plugin", "11.1.0");
331331
defaults.put("extra-watch-webpack-plugin", "1.0.3");
332-
defaults.put("webpack-merge", "4.2.2");
333-
defaults.put("raw-loader", "3.1.0");
334-
defaults.put("css-loader", "5.2.7");
332+
defaults.put("webpack-merge", "6.0.1");
333+
defaults.put("css-loader", "7.1.2");
335334

336-
defaults.put("typescript", "4.0.3");
337-
defaults.put("ts-loader", "8.0.12");
338-
defaults.put("file-loader", "6.1.0");
339-
defaults.put("extract-loader", "5.1.0");
340-
defaults.put("lit-css-loader", "0.0.4");
341-
defaults.put("loader-utils", "2.0.4");
335+
defaults.put("typescript", "4.9.5");
336+
defaults.put("ts-loader", "9.5.2");
337+
defaults.put("lit-css-loader", "3.0.1");
338+
defaults.put("loader-utils", "3.3.1");
342339

343340
// Forcing chokidar version for now until new babel version is available
344341
// check out https://github.com/babel/babel/issues/11488
345342
defaults.put("chokidar", "^3.5.0");
343+
defaults.put("mkdirp", "3.0.1");
346344

347345
defaults.put("@types/node", "18.14.0");
348346
return defaults;

‎flow-server/src/main/java/com/vaadin/flow/server/frontend/TaskUpdateWebpack.java

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
import java.io.IOException;
1414
import java.io.UncheckedIOException;
1515
import java.net.URL;
16+
import java.nio.charset.StandardCharsets;
1617
import java.nio.file.Path;
1718
import java.util.List;
1819

@@ -108,6 +109,18 @@ private void createWebpackConfig() throws IOException {
108109
+ "in the merge or remove the file to generate a new one.",
109110
configFile);
110111
}
112+
// webpack-merge-plugin 5 changes the import format
113+
String contents = FileUtils.readFileToString(configFile,
114+
StandardCharsets.UTF_8);
115+
if (contents.contains("const merge = require('webpack-merge');")) {
116+
log().debug("Updating " + configFile.getName()
117+
+ " to new webpack-merge syntax");
118+
contents = contents.replace(
119+
"const merge = require('webpack-merge');",
120+
"const { merge } = require('webpack-merge');");
121+
FileUtils.write(configFile, contents, StandardCharsets.UTF_8);
122+
}
123+
111124
} else {
112125
URL resource = this.getClass().getClassLoader()
113126
.getResource(webpackTemplate);

‎flow-server/src/main/resources/plugins/stats-plugin/stats-plugin.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* license.
88
*/
99
const fs = require('fs');
10-
const mkdirp = require('mkdirp');
10+
const { mkdirp } = require('mkdirp');
1111
const path = require('path');
1212

1313
/**
@@ -27,7 +27,7 @@ class StatsPlugin {
2727
const logger = compiler.getInfrastructureLogger("FlowIdPlugin");
2828

2929
compiler.hooks.afterEmit.tapAsync("FlowIdPlugin", (compilation, done) => {
30-
let statsJson = compilation.getStats().toJson();
30+
let statsJson = compilation.getStats().toJson({source:true});
3131
// Get bundles as accepted keys
3232
let acceptedKeys = statsJson.assets.filter(asset => asset.chunks.length > 0)
3333
.map(asset => asset.chunks).reduce((acc, val) => acc.concat(val), []);

‎flow-server/src/main/resources/plugins/theme-loader/theme-loader.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const urlMatcher = /(url\()(\'|\")?(\.\/|\.\.\/)(\S*)(\2\))/g;
1414
* @param map source map for file
1515
*/
1616
module.exports = function (source, map) {
17-
const options = loaderUtils.getOptions(this);
17+
const options = this.getOptions();
1818
const handledResourceFolder = path.dirname(this._module.resource);
1919
const logger = this.getLogger("theme-loader");
2020

‎flow-server/src/main/resources/webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Defaults are provided in an autogenerated webpack.generated.js file and used by this file.
77
* The webpack.generated.js file is overwritten on each build and no customization can be done there.
88
*/
9-
const merge = require('webpack-merge');
9+
const { merge } = require('webpack-merge');
1010
const flowDefaults = require('./webpack.generated.js');
1111

1212
module.exports = merge(flowDefaults, {

0 commit comments

Comments
 (0)
0