Skip to content

Commit e4e9c27

Browse files
LyrkanLyrkan
committed
Update Webpack to 5.0.0-alpha (+ other dependencies)
1 parent 5640271 commit e4e9c27

19 files changed

+1411
-1350
lines changed

‎index.js

+28
Original file line numberDiff line numberDiff line change
@@ -916,6 +916,34 @@ class Encore {
916916
return this;
917917
}
918918

919+
/**
920+
* Configure the mini-css-extract-plugin.
921+
*
922+
* https://github.com/webpack-contrib/mini-css-extract-plugin#configuration
923+
*
924+
* ```
925+
* Encore.configureMiniCssExtractPlugin(
926+
* function(loaderConfig) {
927+
* // change the loader's config
928+
* // loaderConfig.reloadAll = true;
929+
* },
930+
* function(pluginConfig) {
931+
* // change the plugin's config
932+
* // pluginConfig.chunkFilename = '[id].css';
933+
* }
934+
* );
935+
* ```
936+
*
937+
* @param {function} loaderOptionsCallback
938+
* @param {function} pluginOptionsCallback
939+
* @returns {Encore}
940+
*/
941+
configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback = () => {}) {
942+
webpackConfig.configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback);
943+
944+
return this;
945+
}
946+
919947
/**
920948
* If enabled, the react preset is added to Babel.
921949
*

‎lib/WebpackConfig.js

+15
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ class WebpackConfig {
147147
this.eslintLoaderOptionsCallback = () => {};
148148
this.tsConfigurationCallback = () => {};
149149
this.handlebarsConfigurationCallback = () => {};
150+
this.miniCssExtractLoaderConfigurationCallback = () => {};
151+
this.miniCssExtractPluginConfigurationCallback = () => {};
150152
this.loaderConfigurationCallbacks = {
151153
javascript: () => {},
152154
css: () => {},
@@ -454,6 +456,19 @@ class WebpackConfig {
454456
this.cssLoaderConfigurationCallback = callback;
455457
}
456458

459+
configureMiniCssExtractPlugin(loaderOptionsCallback, pluginOptionsCallback = () => {}) {
460+
if (typeof loaderOptionsCallback !== 'function') {
461+
throw new Error('Argument 1 to configureMiniCssExtractPluginLoader() must be a callback function.');
462+
}
463+
464+
if (typeof pluginOptionsCallback !== 'function') {
465+
throw new Error('Argument 2 to configureMiniCssExtractPluginLoader() must be a callback function.');
466+
}
467+
468+
this.miniCssExtractLoaderConfigurationCallback = loaderOptionsCallback;
469+
this.miniCssExtractPluginConfigurationCallback = pluginOptionsCallback;
470+
}
471+
457472
enableSingleRuntimeChunk() {
458473
this.shouldUseSingleRuntimeChunk = true;
459474
}

‎lib/config-generator.js

+3-25
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ const miniCssExtractPluginUtil = require('./plugins/mini-css-extract');
2828
const deleteUnusedEntriesPluginUtil = require('./plugins/delete-unused-entries');
2929
const entryFilesManifestPlugin = require('./plugins/entry-files-manifest');
3030
const manifestPluginUtil = require('./plugins/manifest');
31-
const versioningPluginUtil = require('./plugins/versioning');
3231
const variableProviderPluginUtil = require('./plugins/variable-provider');
3332
const cleanPluginUtil = require('./plugins/clean');
3433
const definePluginUtil = require('./plugins/define');
@@ -423,9 +422,7 @@ class ConfigGenerator {
423422
buildPluginsConfig() {
424423
const plugins = [];
425424

426-
if (this.webpackConfig.extractCss) {
427-
miniCssExtractPluginUtil(plugins, this.webpackConfig);
428-
}
425+
miniCssExtractPluginUtil(plugins, this.webpackConfig);
429426

430427
// register the pure-style entries that should be deleted
431428
deleteUnusedEntriesPluginUtil(plugins, this.webpackConfig);
@@ -435,8 +432,6 @@ class ConfigGenerator {
435432
// Dump the manifest.json file
436433
manifestPluginUtil(plugins, this.webpackConfig);
437434

438-
versioningPluginUtil(plugins, this.webpackConfig);
439-
440435
variableProviderPluginUtil(plugins, this.webpackConfig);
441436

442437
cleanPluginUtil(plugins, this.webpackConfig);
@@ -489,29 +484,12 @@ class ConfigGenerator {
489484
terserPluginUtil(this.webpackConfig),
490485
optimizeCssAssetsUtil(this.webpackConfig)
491486
];
492-
} else {
493-
// see versioning.js: this gives us friendly module names,
494-
// which can be useful for debugging, especially with HMR
495-
optimization.namedModules = true;
496487
}
497-
// https://github.com/webpack/webpack/issues/8354
498-
// likely can be removed in Webpack 5
499-
// https://github.com/webpack/webpack/pull/8374
500-
optimization.chunkIds = 'named';
501488

502-
let splitChunks = {
489+
const splitChunks = {
503490
chunks: this.webpackConfig.shouldSplitEntryChunks ? 'all' : 'async'
504491
};
505492

506-
// This causes the split filenames (& internal names) to be,
507-
// for example, 0.js. This is needed so that the filename
508-
// doesn't change suddenly when another entry needs that same
509-
// shared code (e.g. vendor~entry1~entry2.js).
510-
// https://github.com/webpack/webpack/issues/8426#issuecomment-442375207
511-
if (this.webpackConfig.shouldSplitEntryChunks && this.webpackConfig.isProduction()) {
512-
splitChunks.name = false;
513-
}
514-
515493
if (this.webpackConfig.sharedCommonsEntryName) {
516494
const cacheGroups = {};
517495
cacheGroups[this.webpackConfig.sharedCommonsEntryName] = {
@@ -599,7 +577,7 @@ class ConfigGenerator {
599577

600578
buildWatchOptionsConfig() {
601579
const watchOptions = {
602-
ignored: /node_modules/
580+
ignored: 'node_modules'
603581
};
604582

605583
return applyOptionsCallback(

‎lib/loaders/css-extract.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
1313
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
14+
const applyOptionsCallback = require('../utils/apply-options-callback');
1415

1516
module.exports = {
1617
/**
@@ -32,6 +33,17 @@ module.exports = {
3233
}, ...loaders];
3334
}
3435

35-
return [MiniCssExtractPlugin.loader, ...loaders];
36+
// Default options
37+
const options = {
38+
hmr: webpackConfig.useHotModuleReplacementPlugin(),
39+
};
40+
41+
return [{
42+
loader: MiniCssExtractPlugin.loader,
43+
options: applyOptionsCallback(
44+
webpackConfig.miniCssExtractLoaderConfigurationCallback,
45+
options
46+
),
47+
}, ...loaders];
3648
}
3749
};

‎lib/loaders/css.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,9 @@ module.exports = {
2929
// is used, we set it to 1, so that postcss-loader is applied
3030
// to @import resources.
3131
importLoaders: usePostCssLoader ? 1 : 0,
32-
modules: useCssModules,
33-
localIdentName: '[local]_[hash:base64:5]',
32+
modules: useCssModules ? {
33+
localIdentName: '[local]_[hash:base64:5]',
34+
} : false,
3435
};
3536

3637
const cssLoaders = [

‎lib/plugins/mini-css-extract.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,19 @@
1212
const WebpackConfig = require('../WebpackConfig'); //eslint-disable-line no-unused-vars
1313
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
1414
const PluginPriorities = require('./plugin-priorities');
15+
const applyOptionsCallback = require('../utils/apply-options-callback');
1516

1617
/**
1718
* @param {Array} plugins
1819
* @param {WebpackConfig} webpackConfig
1920
* @return {void}
2021
*/
2122
module.exports = function(plugins, webpackConfig) {
23+
// Don't add the plugin if CSS extraction is disabled
24+
if (!webpackConfig.extractCss) {
25+
return;
26+
}
27+
2228
// Default filename can be overridden using Encore.configureFilenames({ css: '...' })
2329
let filename = webpackConfig.useVersioning ? '[name].[contenthash:8].css' : '[name].css';
2430
// the chunk filename should use [id], not [name]. But, due
@@ -45,7 +51,12 @@ module.exports = function(plugins, webpackConfig) {
4551
};
4652

4753
plugins.push({
48-
plugin: new MiniCssExtractPlugin(miniCssPluginOptions),
54+
plugin: new MiniCssExtractPlugin(
55+
applyOptionsCallback(
56+
webpackConfig.miniCssExtractPluginConfigurationCallback,
57+
miniCssPluginOptions
58+
)
59+
),
4960
priority: PluginPriorities.MiniCssExtractPlugin
5061
});
5162
};

‎lib/webpack/delete-unused-entries-js-plugin.js

+20-11
Original file line numberDiff line numberDiff line change
@@ -19,26 +19,35 @@ DeleteUnusedEntriesJSPlugin.prototype.apply = function(compiler) {
1919
compilation.chunks.forEach((chunk) => {
2020
// see of this chunk is one that needs its .js deleted
2121
if (this.entriesToDelete.includes(chunk.name)) {
22-
let fileDeleteCount = 0;
23-
24-
// loop over the output files and find the 1 that ends in .js
25-
// loop in reverse, to avoid issues as we remove items from chunk.files
26-
for (let i = chunk.files.length - 1; i >= 0; --i) {
27-
let filename = chunk.files[i];
28-
if (/\.js(\.map)?(\?[^.]*)?$/.test(filename)) {
29-
fileDeleteCount++;
22+
const removedFiles = [];
23+
24+
// look for main files to delete first
25+
for (const filename of Array.from(chunk.files)) {
26+
if (/\.js?(\?[^.]*)?$/.test(filename)) {
27+
removedFiles.push(filename);
28+
// remove the output file
29+
delete compilation.assets[filename];
30+
// remove the file, so that it does not dump in the manifest
31+
chunk.files.delete(filename);
32+
}
33+
}
34+
35+
// then also look in auxiliary files for source maps
36+
for (const filename of Array.from(chunk.auxiliaryFiles)) {
37+
if (removedFiles.map(name => `${name}.map`).includes(`${filename}`)) {
38+
removedFiles.push(filename);
3039
// remove the output file
3140
delete compilation.assets[filename];
3241
// remove the file, so that it does not dump in the manifest
33-
chunk.files.splice(chunk.files.indexOf(filename), 1);
42+
chunk.auxiliaryFiles.delete(filename);
3443
}
3544
}
3645

3746
// sanity check: make sure 1 or 2 files were deleted
3847
// if there's some edge case where more .js files
3948
// or 0 .js files might be deleted, I'd rather error
40-
if (fileDeleteCount === 0 || fileDeleteCount > 2) {
41-
throw new Error(`Problem deleting JS entry for ${chunk.name}: ${fileDeleteCount} files were deleted`);
49+
if (removedFiles.length === 0 || removedFiles.length > 2) {
50+
throw new Error(`Problem deleting JS entry for ${chunk.name}: ${removedFiles.length} files were deleted (${removedFiles.join(', ')})`);
4251
}
4352
}
4453
});

‎lib/webpack/shared-entry-concat-plugin.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ function getChunkFilename(compilation, chunkName) {
2626
throw new Error(`Cannot find chunk ${chunkName}`);
2727
}
2828

29-
const jsFiles = chunk.files.filter(filename => {
29+
const jsFiles = Array.from(chunk.files).filter(filename => {
3030
const fileExtension = getFileExtension(filename);
3131
return /^js$/.test(fileExtension) && !additionalChunkAssets.includes(filename);
3232
});

‎package.json

+14-13
Original file line numberDiff line numberDiff line change
@@ -32,26 +32,27 @@
3232
"babel-loader": "^8.0.0",
3333
"chalk": "^2.4.1",
3434
"clean-webpack-plugin": "^0.1.19",
35-
"css-loader": "^2.1.1",
35+
"css-loader": "^3.2.0",
3636
"fast-levenshtein": "^2.0.6",
37-
"file-loader": "^1.1.10",
37+
"file-loader": "^4.2.0",
3838
"friendly-errors-webpack-plugin": "^2.0.0-beta.1",
3939
"fs-extra": "^2.0.0",
4040
"loader-utils": "^1.1.0",
4141
"lodash": ">=3.5 <5",
42-
"mini-css-extract-plugin": ">=0.4.0 <0.4.3",
42+
"mini-css-extract-plugin": "^0.8.0",
4343
"optimize-css-assets-webpack-plugin": "^5.0.1",
4444
"pkg-up": "^1.0.0",
4545
"pretty-error": "^2.1.1",
4646
"resolve-url-loader": "^3.0.1",
4747
"semver": "^5.5.0",
4848
"style-loader": "^0.21.0",
49-
"terser-webpack-plugin": "^1.1.0",
49+
"tapable": "^1.0.0",
50+
"terser-webpack-plugin": "^2.1.2",
5051
"tmp": "^0.0.33",
51-
"webpack": "^4.20.0",
52-
"webpack-cli": "^3.0.0",
52+
"webpack": "^5.0.0-alpha.29",
53+
"webpack-cli": "^3.3.9",
5354
"webpack-dev-server": "^3.1.14",
54-
"webpack-manifest-plugin": "^2.0.2",
55+
"webpack-manifest-plugin": "^2.2.0",
5556
"webpack-sources": "^1.3.0",
5657
"yargs-parser": "^12.0.0"
5758
},
@@ -66,7 +67,7 @@
6667
"chai-fs": "^1.0.0",
6768
"core-js": "^3.0.0",
6869
"eslint": "^5.15.2",
69-
"eslint-loader": "^2.1.2",
70+
"eslint-loader": "^3.0.2",
7071
"eslint-plugin-header": "^1.0.0",
7172
"eslint-plugin-import": "^2.8.0",
7273
"eslint-plugin-node": "^8.0.1",
@@ -83,16 +84,16 @@
8384
"preact-compat": "^3.17.0",
8485
"sass": "^1.17.0",
8586
"sass-loader": "^7.0.1",
86-
"sinon": "^2.3.4",
87+
"sinon": "^7.5.0",
8788
"strip-ansi": "^5.0.0",
8889
"stylus": "^0.54.5",
8990
"stylus-loader": "^3.0.2",
9091
"ts-loader": "^5.3.0",
9192
"typescript": "^2.3.4",
92-
"url-loader": "^1.0.1 || ^2.0.1",
93-
"vue": "^2.3.4",
94-
"vue-loader": "^15.0.11",
95-
"vue-template-compiler": "^2.3.4",
93+
"url-loader": "^2.1.0",
94+
"vue": "^2.6.10",
95+
"vue-loader": "^15.7.1",
96+
"vue-template-compiler": "^2.6.10",
9697
"webpack-notifier": "^1.6.0",
9798
"zombie": "^6.1.4"
9899
},

0 commit comments

Comments
 (0)