Skip to content

Commit

Permalink
feature #645 Update Webpack to v5 (+ other dependencies) (Lyrkan)
Browse files Browse the repository at this point in the history 
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 `webpack@5.0.0-beta.15`: `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
  • Loading branch information
@weaverryan
weaverryan committed Dec 31, 2020
2 parents 32cc0af + 57f64fa commit a27a476
Show file tree
Hide file tree
Showing 31 changed files with 2,028 additions and 2,918 deletions.
5 changes: 0 additions & 5 deletions fixtures/js/shared_example.js
View file

This file was deleted.

99 changes: 35 additions & 64 deletions index.js
View file
Expand Up @@ -192,25 +192,22 @@ class Encore {
}

/**
* Allows you to configure the options passed to the optimize-css-assets-webpack-plugin.
* A list of available options can be found at https://github.com/NMFR/optimize-css-assets-webpack-plugin
* Allows you to configure the options passed to the css-minimizer-webpack-plugin.
* A list of available options can be found at https://github.com/webpack-contrib/css-minimizer-webpack-plugin
*
* For example:
*
* ```
* Encore.configureOptimizeCssPlugin((options) => {
* options.cssProcessor = require('cssnano');
* options.cssProcessorPluginOptions = {
* preset: ['default', { discardComments: { removeAll: true } }],
* }
* Encore.configureCssMinimizerPlugin((options) => {
* options.parallel = false;
* })
* ```
*
* @param {function} optimizeCssPluginOptionsCallback
* @param {function} cssMinimizerPluginOptionsCallback
* @returns {Encore}
*/
configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback = () => {}) {
webpackConfig.configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback);
configureCssMinimizerPlugin(cssMinimizerPluginOptionsCallback = () => {}) {
webpackConfig.configureCssMinimizerPlugin(cssMinimizerPluginOptionsCallback);

return this;
}
Expand Down Expand Up @@ -454,28 +451,6 @@ class Encore {
return this;
}

/**
* Add a "commons" file that holds JS shared by multiple chunks/files.
*
* For example:
*
* ```
* Encore.createSharedEntry(
* 'vendor',
* './src/shared.js'
* );
* ```
*
* @param {string} name The chunk name (e.g. vendor to create a vendor.js)
* @param {string} file A file whose code & imports should be put into the shared file.
* @returns {Encore}
*/
createSharedEntry(name, file) {
webpackConfig.createSharedEntry(name, file);

return this;
}

/**
* Add a new cache group to Webpack's SplitChunksPlugin.
* This can, for instance, be used to extract code that
Expand Down Expand Up @@ -1030,6 +1005,34 @@ class Encore {
return this;
}

/**
* Configure the mini-css-extract-plugin.
*
* https://github.com/webpack-contrib/mini-css-extract-plugin#configuration
*
* ```
* Encore.configureMiniCssExtractPlugin(
* function(loaderConfig) {
* // change the loader's config
* // loaderConfig.reloadAll = true;
* },
* function(pluginConfig) {
* // change the plugin's config
* // pluginConfig.chunkFilename = '[id].css';
* }
* );
* ```
*
* @param {function} loaderOptionsCallback
* @param {function} pluginOptionsCallback
* @returns {Encore}
*/
configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback = () => {}) {
webpackConfig.configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback);

return this;
}

/**
* If enabled, the react preset is added to Babel.
*
Expand Down Expand Up @@ -1634,38 +1637,6 @@ class Encore {
runtimeConfig = null;
webpackConfig = null;
}

/**
* @deprecated
* @return {void}
*/
configureExtractTextPlugin() {
throw new Error('The configureExtractTextPlugin() method was removed from Encore. The underlying plugin was removed from Webpack 4.');
}

/**
* @deprecated
* @return {void}
*/
enableCoffeeScriptLoader() {
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!');
}

/**
* @deprecated
* @return {void}
*/
configureUglifyJsPlugin() {
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.');
}

/**
* @deprecated
* @return {void}
*/
configureLoaderOptionsPlugin() {
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().');
}
}

/**
Expand Down
83 changes: 29 additions & 54 deletions lib/WebpackConfig.js
View file
Expand Up @@ -83,8 +83,6 @@ class WebpackConfig {
this.outputPath = null;
this.publicPath = null;
this.manifestKeyPrefix = null;
this.sharedCommonsEntryName = null;
this.sharedCommonsEntryFile = null;
this.cacheGroups = {};
this.providedVariables = {};
this.configuredFilenames = {};
Expand Down Expand Up @@ -163,6 +161,8 @@ class WebpackConfig {
this.eslintLoaderOptionsCallback = () => {};
this.tsConfigurationCallback = () => {};
this.handlebarsConfigurationCallback = () => {};
this.miniCssExtractLoaderConfigurationCallback = () => {};
this.miniCssExtractPluginConfigurationCallback = () => {};
this.loaderConfigurationCallbacks = {
javascript: () => {},
css: () => {},
Expand All @@ -187,7 +187,7 @@ class WebpackConfig {
this.friendlyErrorsPluginOptionsCallback = () => {};
this.manifestPluginOptionsCallback = () => {};
this.terserPluginOptionsCallback = () => {};
this.optimizeCssPluginOptionsCallback = () => {};
this.cssMinimizerPluginOptionsCallback = () => {};
this.notifierPluginOptionsCallback = () => {};
}

Expand Down Expand Up @@ -299,12 +299,12 @@ class WebpackConfig {
this.terserPluginOptionsCallback = terserPluginOptionsCallback;
}

configureOptimizeCssPlugin(optimizeCssPluginOptionsCallback = () => {}) {
if (typeof optimizeCssPluginOptionsCallback !== 'function') {
throw new Error('Argument 1 to configureOptimizeCssPlugin() must be a callback function');
configureCssMinimizerPlugin(cssMinimizerPluginOptionsCallback = () => {}) {
if (typeof cssMinimizerPluginOptionsCallback !== 'function') {
throw new Error('Argument 1 to configureCssMinimizerPlugin() must be a callback function');
}

this.optimizeCssPluginOptionsCallback = optimizeCssPluginOptionsCallback;
this.cssMinimizerPluginOptionsCallback = cssMinimizerPluginOptionsCallback;
}

/**
Expand Down Expand Up @@ -414,18 +414,12 @@ class WebpackConfig {
const allowedOptionsWithExternalConfig = ['includeNodeModules', 'exclude'];

for (const optionKey of Object.keys(options)) {
let normalizedOptionKey = optionKey;
if (optionKey === 'include_node_modules') {
logger.deprecation('configureBabel: "include_node_modules" is deprecated. Please use "includeNodeModules" instead.');
normalizedOptionKey = 'includeNodeModules';
}

if (this.doesBabelRcFileExist() && !allowedOptionsWithExternalConfig.includes(normalizedOptionKey)) {
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").`);
if (this.doesBabelRcFileExist() && !allowedOptionsWithExternalConfig.includes(optionKey)) {
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").`);
continue;
}

if (normalizedOptionKey === 'includeNodeModules') {
if (optionKey === 'includeNodeModules') {
if (Object.keys(options).includes('exclude')) {
throw new Error('"includeNodeModules" and "exclude" options can\'t be used together when calling configureBabel().');
}
Expand Down Expand Up @@ -454,10 +448,10 @@ class WebpackConfig {
// Exclude other modules
return true;
};
} else if (!(normalizedOptionKey in this.babelOptions)) {
throw new Error(`Invalid option "${normalizedOptionKey}" passed to configureBabel(). Valid keys are ${[...Object.keys(this.babelOptions), 'includeNodeModules'].join(', ')}`);
} else if (!(optionKey in this.babelOptions)) {
throw new Error(`Invalid option "${optionKey}" passed to configureBabel(). Valid keys are ${[...Object.keys(this.babelOptions), 'includeNodeModules'].join(', ')}`);
} else {
this.babelOptions[normalizedOptionKey] = options[optionKey];
this.babelOptions[optionKey] = options[optionKey];
}
}
}
Expand Down Expand Up @@ -490,6 +484,19 @@ class WebpackConfig {
this.styleLoaderConfigurationCallback = callback;
}

configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback = () => {}) {
if (typeof loaderOptionsCallback !== 'function') {
throw new Error('Argument 1 to configureMiniCssExtractPluginLoader() must be a callback function.');
}

if (typeof pluginOptionsCallback !== 'function') {
throw new Error('Argument 2 to configureMiniCssExtractPluginLoader() must be a callback function.');
}

this.miniCssExtractLoaderConfigurationCallback = loaderOptionsCallback;
this.miniCssExtractPluginConfigurationCallback = pluginOptionsCallback;
}

enableSingleRuntimeChunk() {
this.shouldUseSingleRuntimeChunk = true;
}
Expand All @@ -499,10 +506,6 @@ class WebpackConfig {
}

splitEntryChunks() {
if (this.sharedCommonsEntryName) {
throw new Error('Using splitEntryChunks() and createSharedEntry() together is not supported. Use one of these strategies only to optimize your build.');
}

this.shouldSplitEntryChunks = true;
}

Expand Down Expand Up @@ -530,28 +533,6 @@ class WebpackConfig {
this.devServerOptionsConfigurationCallback = callback;
}

createSharedEntry(name, file) {
logger.deprecation('Encore.createSharedEntry() is deprecated and will be removed in a future version, please use Encore.splitEntryChunks() or Encore.addCacheGroup() instead.');

if (this.shouldSplitEntryChunks) {
throw new Error('Using splitEntryChunks() and createSharedEntry() together is not supported. Use one of these strategies only to optimize your build.');
}

// don't allow to call this twice
if (this.sharedCommonsEntryName) {
throw new Error('createSharedEntry() cannot be called multiple times: you can only create *one* shared entry.');
}

if (Array.isArray(file)) {
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.');
}

this.sharedCommonsEntryName = name;
this.sharedCommonsEntryFile = file;

this.addEntry(name, file);
}

addCacheGroup(name, options) {
if (typeof name !== 'string') {
throw new Error('Argument 1 to addCacheGroup() must be a string.');
Expand Down Expand Up @@ -650,17 +631,11 @@ class WebpackConfig {
this.sassLoaderOptionsCallback = sassLoaderOptionsCallback;

for (const optionKey of Object.keys(options)) {
let normalizedOptionKey = optionKey;
if (optionKey === 'resolve_url_loader') {
logger.deprecation('enableSassLoader: "resolve_url_loader" is deprecated. Please use "resolveUrlLoader" instead.');
normalizedOptionKey = 'resolveUrlLoader';
}

if (!(normalizedOptionKey in this.sassOptions)) {
throw new Error(`Invalid option "${normalizedOptionKey}" passed to enableSassLoader(). Valid keys are ${Object.keys(this.sassOptions).join(', ')}`);
if (!(optionKey in this.sassOptions)) {
throw new Error(`Invalid option "${optionKey}" passed to enableSassLoader(). Valid keys are ${Object.keys(this.sassOptions).join(', ')}`);
}

this.sassOptions[normalizedOptionKey] = options[optionKey];
this.sassOptions[optionKey] = options[optionKey];
}
}

Expand Down

0 comments on commit a27a476

Please sign in to comment.