Skip to content

Commit a27a476

Browse files
committed
feature #645 Update Webpack to v5 (+ other dependencies) (Lyrkan)
This PR was squashed before being merged into the main branch. Discussion ---------- Update Webpack to v5 (+ other dependencies) Last week Webpack added a compat layer to its v5 alpha that allows the `mini-css-extract-plugin` to run on it (with deprecated messages). Since we include that plugin by default (and a lot of our tests relie on it) it was the main thing blocking us from preparing the migration. --- I basically started from #564 which was updating some dependencies, enabling CSS HMR when needed and adding a `configureMiniCssExtractPlugin(...)` method, but with a few changes: * no more inconsistent hashes checks for the `enableVersioning applies to js, css & manifest` test: it seems to be working fine by default * no more embedding the `webpack-manifest-plugin` into our code: shellscape/webpack-manifest-plugin#167 is still an issue but @mastilver has been working on the project lately (which is why the plugin works with Webpack 5) and a fix has already been merged on the `next` branch, so it's probably only a matter of time now :). **Edit: Fixed in `webpack-manifest-plugin@^3.0.0-rc`** * removal of Node 8 compatibility So now, about the state of that PR: **0 failing test left**: * ~6 tests that will probably be fixed by webpack/webpack#10661 in `[email protected]`: `Uncaught Error: Error when running the browser: Error: Error when running the browser: ReferenceError: mod is not defined`~ * ~All the 7 tests related to the `vue-loader` are failing with a `Cannot find module 'webpack/lib/RuleSet` error message (see: vuejs/vue-loader#1599 * ~1 test related to the `webpack-manifest-plugin` issue previously mentioned~ * ~1 test related to `createSharedEntry()` which doesn't seem to work properly~ * ~1 test related to Babel that doesn't transform an arrow function as expected~ **A lot of deprecation notices** (but most, if not all, of them are triggered by vendors), for instance: * `Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader` * `Module.id: Use new ChunkGraph API` * `Module.updateHash: Use new ChunkGraph API` * `Chunk.modulesIterable: Use new ChunkGraph API` * `ChunkGroup.getModuleIndex2 was renamed to getModulePostOrderIndex` * `Compilation.chunks was changed from Array to Set (using Array method 'reduce' is deprecated)` * `chunk.files was changed from Array to Set (using Array method 'reduce' is deprecated)` **Some modules do not declare they are compatible with Webpack 5 yet** *(warning messages during `yarn install`)*: this shouldn't be an issue **unless** those modules require a major version upgrade to be officialy compatible (in which case breaking changes could impact us). **We're still using `webpack-cli@3`** which may not support Webpack 5. It currently seems to be OK but we should probably upgrade to `webpack-cli@4` (currently in beta). I took a quick glance at it and it probably won't be an easy thing to do, mainly because of how our "runtime context" works and how the new version of the CLI calls Webpack (through another process). Commits ------- 57f64fa Remove unusued files/constants related to versioning/shared entry 8d7843a Add removed Babel test back 216a5ca Update css-loader and style-loader ddcd6d8 Merge branch 'main' into webpack5 444c37f Merge branch 'main' into webpack5 b292e76 Fix linting issues d576b21 Remove deprecation caused by the DeletedUnusuedEntriesJSPlugin b0f7190 Update some hashes in functional tests 4f6171b Update WebpackManifestPlugin to v3.0.0 and vue-loader to v16.1.0 9af90ee Remove wrong comment 50cea18 Bump min. Typescript version to 3.6.3 1d22520 Don't set hmr option for mini-css-extract-plugin (deprecated since 1.0.0) 564b147 Update Vue.js dependencies 8da531e Replace optimize-css-assets-webpack-plugin by css-minimizer-webpack-plugin f3843ca Update Webpack to 5.0.0
2 parents 32cc0af + 57f64fa commit a27a476

31 files changed

+2028
-2918
lines changed

fixtures/js/shared_example.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

index.js

Lines changed: 35 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -192,25 +192,22 @@ class Encore {
192192
}
193193

194194
/**
195-
* Allows you to configure the options passed to the optimize-css-assets-webpack-plugin.
196-
* A list of available options can be found at https://github.com/NMFR/optimize-css-assets-webpack-plugin
195+
* Allows you to configure the options passed to the css-minimizer-webpack-plugin.
196+
* A list of available options can be found at https://github.com/webpack-contrib/css-minimizer-webpack-plugin
197197
*
198198
* For example:
199199
*
200200
* ```
201-
* Encore.configureOptimizeCssPlugin((options) => {
202-
* options.cssProcessor = require('cssnano');
203-
* options.cssProcessorPluginOptions = {
204-
* preset: ['default', { discardComments: { removeAll: true } }],
205-
* }
201+
* Encore.configureCssMinimizerPlugin((options) => {
202+
* options.parallel = false;
206203
* })
207204
* ```
208205
*
209-
* @param {function} optimizeCssPluginOptionsCallback
206+
* @param {function} cssMinimizerPluginOptionsCallback
210207
* @returns {Encore}
211208
*/
212-
configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback = () => {}) {
213-
webpackConfig.configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback);
209+
configureCssMinimizerPlugin(cssMinimizerPluginOptionsCallback = () => {}) {
210+
webpackConfig.configureCssMinimizerPlugin(cssMinimizerPluginOptionsCallback);
214211

215212
return this;
216213
}
@@ -454,28 +451,6 @@ class Encore {
454451
return this;
455452
}
456453

457-
/**
458-
* Add a "commons" file that holds JS shared by multiple chunks/files.
459-
*
460-
* For example:
461-
*
462-
* ```
463-
* Encore.createSharedEntry(
464-
* 'vendor',
465-
* './src/shared.js'
466-
* );
467-
* ```
468-
*
469-
* @param {string} name The chunk name (e.g. vendor to create a vendor.js)
470-
* @param {string} file A file whose code & imports should be put into the shared file.
471-
* @returns {Encore}
472-
*/
473-
createSharedEntry(name, file) {
474-
webpackConfig.createSharedEntry(name, file);
475-
476-
return this;
477-
}
478-
479454
/**
480455
* Add a new cache group to Webpack's SplitChunksPlugin.
481456
* This can, for instance, be used to extract code that
@@ -1030,6 +1005,34 @@ class Encore {
10301005
return this;
10311006
}
10321007

1008+
/**
1009+
* Configure the mini-css-extract-plugin.
1010+
*
1011+
* https://github.com/webpack-contrib/mini-css-extract-plugin#configuration
1012+
*
1013+
* ```
1014+
* Encore.configureMiniCssExtractPlugin(
1015+
* function(loaderConfig) {
1016+
* // change the loader's config
1017+
* // loaderConfig.reloadAll = true;
1018+
* },
1019+
* function(pluginConfig) {
1020+
* // change the plugin's config
1021+
* // pluginConfig.chunkFilename = '[id].css';
1022+
* }
1023+
* );
1024+
* ```
1025+
*
1026+
* @param {function} loaderOptionsCallback
1027+
* @param {function} pluginOptionsCallback
1028+
* @returns {Encore}
1029+
*/
1030+
configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback = () => {}) {
1031+
webpackConfig.configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback);
1032+
1033+
return this;
1034+
}
1035+
10331036
/**
10341037
* If enabled, the react preset is added to Babel.
10351038
*
@@ -1634,38 +1637,6 @@ class Encore {
16341637
runtimeConfig = null;
16351638
webpackConfig = null;
16361639
}
1637-
1638-
/**
1639-
* @deprecated
1640-
* @return {void}
1641-
*/
1642-
configureExtractTextPlugin() {
1643-
throw new Error('The configureExtractTextPlugin() method was removed from Encore. The underlying plugin was removed from Webpack 4.');
1644-
}
1645-
1646-
/**
1647-
* @deprecated
1648-
* @return {void}
1649-
*/
1650-
enableCoffeeScriptLoader() {
1651-
throw new Error('The enableCoffeeScriptLoader() method and CoffeeScript support was removed from Encore due to support problems with Webpack 4. If you are interested in this feature, please submit a pull request!');
1652-
}
1653-
1654-
/**
1655-
* @deprecated
1656-
* @return {void}
1657-
*/
1658-
configureUglifyJsPlugin() {
1659-
throw new Error('The configureUglifyJsPlugin() method was removed from Encore due to uglify-js dropping ES6+ support in its latest version. Please use configureTerserPlugin() instead.');
1660-
}
1661-
1662-
/**
1663-
* @deprecated
1664-
* @return {void}
1665-
*/
1666-
configureLoaderOptionsPlugin() {
1667-
throw new Error('The configureLoaderOptionsPlugin() method was removed from Encore. The underlying plugin should not be needed anymore unless you are using outdated loaders. If that\'s the case you can still add it using addPlugin().');
1668-
}
16691640
}
16701641

16711642
/**

lib/WebpackConfig.js

Lines changed: 29 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,6 @@ class WebpackConfig {
8383
this.outputPath = null;
8484
this.publicPath = null;
8585
this.manifestKeyPrefix = null;
86-
this.sharedCommonsEntryName = null;
87-
this.sharedCommonsEntryFile = null;
8886
this.cacheGroups = {};
8987
this.providedVariables = {};
9088
this.configuredFilenames = {};
@@ -163,6 +161,8 @@ class WebpackConfig {
163161
this.eslintLoaderOptionsCallback = () => {};
164162
this.tsConfigurationCallback = () => {};
165163
this.handlebarsConfigurationCallback = () => {};
164+
this.miniCssExtractLoaderConfigurationCallback = () => {};
165+
this.miniCssExtractPluginConfigurationCallback = () => {};
166166
this.loaderConfigurationCallbacks = {
167167
javascript: () => {},
168168
css: () => {},
@@ -187,7 +187,7 @@ class WebpackConfig {
187187
this.friendlyErrorsPluginOptionsCallback = () => {};
188188
this.manifestPluginOptionsCallback = () => {};
189189
this.terserPluginOptionsCallback = () => {};
190-
this.optimizeCssPluginOptionsCallback = () => {};
190+
this.cssMinimizerPluginOptionsCallback = () => {};
191191
this.notifierPluginOptionsCallback = () => {};
192192
}
193193

@@ -299,12 +299,12 @@ class WebpackConfig {
299299
this.terserPluginOptionsCallback = terserPluginOptionsCallback;
300300
}
301301

302-
configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback = () => {}) {
303-
if (typeof optimizeCssPluginOptionsCallback !== 'function') {
304-
throw new Error('Argument 1 to configureOptimizeCssPlugin() must be a callback function');
302+
configureCssMinimizerPlugin(cssMinimizerPluginOptionsCallback = () => {}) {
303+
if (typeof cssMinimizerPluginOptionsCallback !== 'function') {
304+
throw new Error('Argument 1 to configureCssMinimizerPlugin() must be a callback function');
305305
}
306306

307-
this.optimizeCssPluginOptionsCallback = optimizeCssPluginOptionsCallback;
307+
this.cssMinimizerPluginOptionsCallback = cssMinimizerPluginOptionsCallback;
308308
}
309309

310310
/**
@@ -414,18 +414,12 @@ class WebpackConfig {
414414
const allowedOptionsWithExternalConfig = ['includeNodeModules', 'exclude'];
415415

416416
for (const optionKey of Object.keys(options)) {
417-
let normalizedOptionKey = optionKey;
418-
if (optionKey === 'include_node_modules') {
419-
logger.deprecation('configureBabel: "include_node_modules" is deprecated. Please use "includeNodeModules" instead.');
420-
normalizedOptionKey = 'includeNodeModules';
421-
}
422-
423-
if (this.doesBabelRcFileExist() && !allowedOptionsWithExternalConfig.includes(normalizedOptionKey)) {
424-
logger.warning(`The "${normalizedOptionKey}" option of configureBabel() will not be used because your app already provides an external Babel configuration (e.g. a ".babelrc" or "babel.config.js" file or "babel" key in "package.json").`);
417+
if (this.doesBabelRcFileExist() && !allowedOptionsWithExternalConfig.includes(optionKey)) {
418+
logger.warning(`The "${optionKey}" option of configureBabel() will not be used because your app already provides an external Babel configuration (e.g. a ".babelrc" or "babelrc.config.js" file or "babel" key in "package.json").`);
425419
continue;
426420
}
427421

428-
if (normalizedOptionKey === 'includeNodeModules') {
422+
if (optionKey === 'includeNodeModules') {
429423
if (Object.keys(options).includes('exclude')) {
430424
throw new Error('"includeNodeModules" and "exclude" options can\'t be used together when calling configureBabel().');
431425
}
@@ -454,10 +448,10 @@ class WebpackConfig {
454448
// Exclude other modules
455449
return true;
456450
};
457-
} else if (!(normalizedOptionKey in this.babelOptions)) {
458-
throw new Error(`Invalid option "${normalizedOptionKey}" passed to configureBabel(). Valid keys are ${[...Object.keys(this.babelOptions), 'includeNodeModules'].join(', ')}`);
451+
} else if (!(optionKey in this.babelOptions)) {
452+
throw new Error(`Invalid option "${optionKey}" passed to configureBabel(). Valid keys are ${[...Object.keys(this.babelOptions), 'includeNodeModules'].join(', ')}`);
459453
} else {
460-
this.babelOptions[normalizedOptionKey] = options[optionKey];
454+
this.babelOptions[optionKey] = options[optionKey];
461455
}
462456
}
463457
}
@@ -490,6 +484,19 @@ class WebpackConfig {
490484
this.styleLoaderConfigurationCallback = callback;
491485
}
492486

487+
configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback = () => {}) {
488+
if (typeof loaderOptionsCallback !== 'function') {
489+
throw new Error('Argument 1 to configureMiniCssExtractPluginLoader() must be a callback function.');
490+
}
491+
492+
if (typeof pluginOptionsCallback !== 'function') {
493+
throw new Error('Argument 2 to configureMiniCssExtractPluginLoader() must be a callback function.');
494+
}
495+
496+
this.miniCssExtractLoaderConfigurationCallback = loaderOptionsCallback;
497+
this.miniCssExtractPluginConfigurationCallback = pluginOptionsCallback;
498+
}
499+
493500
enableSingleRuntimeChunk() {
494501
this.shouldUseSingleRuntimeChunk = true;
495502
}
@@ -499,10 +506,6 @@ class WebpackConfig {
499506
}
500507

501508
splitEntryChunks() {
502-
if (this.sharedCommonsEntryName) {
503-
throw new Error('Using splitEntryChunks() and createSharedEntry() together is not supported. Use one of these strategies only to optimize your build.');
504-
}
505-
506509
this.shouldSplitEntryChunks = true;
507510
}
508511

@@ -530,28 +533,6 @@ class WebpackConfig {
530533
this.devServerOptionsConfigurationCallback = callback;
531534
}
532535

533-
createSharedEntry(name, file) {
534-
logger.deprecation('Encore.createSharedEntry() is deprecated and will be removed in a future version, please use Encore.splitEntryChunks() or Encore.addCacheGroup() instead.');
535-
536-
if (this.shouldSplitEntryChunks) {
537-
throw new Error('Using splitEntryChunks() and createSharedEntry() together is not supported. Use one of these strategies only to optimize your build.');
538-
}
539-
540-
// don't allow to call this twice
541-
if (this.sharedCommonsEntryName) {
542-
throw new Error('createSharedEntry() cannot be called multiple times: you can only create *one* shared entry.');
543-
}
544-
545-
if (Array.isArray(file)) {
546-
throw new Error('Argument 2 to createSharedEntry() must be a single string file: not an array of files. Try creating one file that requires/imports all the modules that should be included.');
547-
}
548-
549-
this.sharedCommonsEntryName = name;
550-
this.sharedCommonsEntryFile = file;
551-
552-
this.addEntry(name, file);
553-
}
554-
555536
addCacheGroup(name, options) {
556537
if (typeof name !== 'string') {
557538
throw new Error('Argument 1 to addCacheGroup() must be a string.');
@@ -650,17 +631,11 @@ class WebpackConfig {
650631
this.sassLoaderOptionsCallback = sassLoaderOptionsCallback;
651632

652633
for (const optionKey of Object.keys(options)) {
653-
let normalizedOptionKey = optionKey;
654-
if (optionKey === 'resolve_url_loader') {
655-
logger.deprecation('enableSassLoader: "resolve_url_loader" is deprecated. Please use "resolveUrlLoader" instead.');
656-
normalizedOptionKey = 'resolveUrlLoader';
657-
}
658-
659-
if (!(normalizedOptionKey in this.sassOptions)) {
660-
throw new Error(`Invalid option "${normalizedOptionKey}" passed to enableSassLoader(). Valid keys are ${Object.keys(this.sassOptions).join(', ')}`);
634+
if (!(optionKey in this.sassOptions)) {
635+
throw new Error(`Invalid option "${optionKey}" passed to enableSassLoader(). Valid keys are ${Object.keys(this.sassOptions).join(', ')}`);
661636
}
662637

663-
this.sassOptions[normalizedOptionKey] = options[optionKey];
638+
this.sassOptions[optionKey] = options[optionKey];
664639
}
665640
}
666641

0 commit comments

Comments
 (0)