diff options
author | silverwind | 2020-12-27 15:24:27 +0100 |
---|---|---|
committer | GitHub | 2020-12-27 15:24:27 +0100 |
commit | 50a2dd52baed6a998cca332761c3e9eccf0157a9 (patch) | |
tree | 4c5a2ca412a208ba510bcbff14ce2731c79dbb2e /webpack.config.js | |
parent | fe403725f45e4515ce89d6a4dfd01e9698d38ad9 (diff) |
Update JS dependencies and webpack (#14118)
* Update JS dependencies
- Update all JS dependencies
- Adapt webpack config for version 5
- Update to Less 4.0, adapting usage of removed mixin syntax
- Enable new ESLint rules and fix discovered issues
* update license-webpack-plugin to fix missing licenses
* update license-webpack-plugin once more to get webpack into the license output
* switch to license-checker-webpack-plugin again for performance
* update deps again
Co-authored-by: Lauris BH <lauris@nix.lv>
Diffstat (limited to 'webpack.config.js')
-rw-r--r-- | webpack.config.js | 68 |
1 files changed, 35 insertions, 33 deletions
diff --git a/webpack.config.js b/webpack.config.js index 921177475..d21ab1d83 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,14 +2,13 @@ const fastGlob = require('fast-glob'); const wrapAnsi = require('wrap-ansi'); const AddAssetPlugin = require('add-asset-webpack-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries'); +const LicenseCheckerWebpackPlugin = require('license-checker-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const {statSync} = require('fs'); const {resolve, parse} = require('path'); -const {LicenseWebpackPlugin} = require('license-webpack-plugin'); const {SourceMapDevToolPlugin} = require('webpack'); const glob = (pattern) => fastGlob.sync(pattern, {cwd: __dirname, absolute: true}); @@ -30,8 +29,8 @@ const filterCssImport = (url, ...args) => { if (/(eot|ttf|otf|woff|svg)$/.test(importedFile)) return false; } - if (cssFile.includes('font-awesome')) { - if (/(eot|ttf|otf|woff|svg)$/.test(importedFile)) return false; + if (cssFile.includes('font-awesome') && /(eot|ttf|otf|woff|svg)$/.test(importedFile)) { + return false; } return true; @@ -71,13 +70,15 @@ module.exports = { // we have to put it in / instead of /js/ return chunk.name === 'serviceworker' ? '[name].js' : 'js/[name].js'; }, - chunkFilename: 'js/[name].js', + chunkFilename: ({chunk}) => { + const language = (/monaco.*languages?_.+?_(.+?)_/.exec(chunk.id) || [])[1]; + return language ? `js/monaco-language-${language.toLowerCase()}.js` : `js/[name].js`; + }, }, optimization: { minimize: isProduction, minimizer: [ new TerserPlugin({ - sourceMap: true, extractComments: false, terserOptions: { output: { @@ -103,6 +104,8 @@ module.exports = { chunks: 'async', name: (_, chunks) => chunks.map((item) => item.name).join('-'), }, + moduleIds: 'named', + chunkIds: 'named', }, module: { rules: [ @@ -240,11 +243,6 @@ module.exports = { }, plugins: [ new VueLoaderPlugin(), - // avoid generating useless js output files for css--only chunks - new FixStyleOnlyEntriesPlugin({ - extensions: ['less', 'scss', 'css'], - silent: true, - }), new MiniCssExtractPlugin({ filename: 'css/[name].css', chunkFilename: 'css/[name].css', @@ -259,29 +257,18 @@ module.exports = { new MonacoWebpackPlugin({ filename: 'js/monaco-[name].worker.js', }), - isProduction ? new LicenseWebpackPlugin({ + isProduction ? new LicenseCheckerWebpackPlugin({ outputFilename: 'js/licenses.txt', - perChunkOutput: false, - addBanner: false, - skipChildCompilers: true, - modulesDirectories: [ - resolve(__dirname, 'node_modules'), - ], - additionalModules: [ - '@primer/octicons', - ].map((name) => ({name, directory: resolve(__dirname, `node_modules/${name}`)})), - renderLicenses: (modules) => { + outputWriter: ({dependencies}) => { const line = '-'.repeat(80); - return modules.map((module) => { - const {name, version} = module.packageJson; - const {licenseId, licenseText} = module; + return dependencies.map((module) => { + const {name, version, licenseName, licenseText} = module; const body = wrapAnsi(licenseText || '', 80); - return `${line}\n${name}@${version} - ${licenseId}\n${line}\n${body}`; + return `${line}\n${name}@${version} - ${licenseName}\n${line}\n${body}`; }).join('\n'); }, - stats: { - warnings: false, - errors: true, + override: { + 'jquery.are-you-sure@*': {licenseName: 'MIT'}, }, }) : new AddAssetPlugin('js/licenses.txt', `Licenses are disabled during development`), ], @@ -302,11 +289,26 @@ module.exports = { ], }, stats: { + assetsSort: 'name', + assetsSpace: Infinity, + cached: false, + cachedModules: false, children: false, + chunkModules: false, + chunkOrigins: false, + chunksSort: 'name', + colors: true, + entrypoints: false, excludeAssets: [ - // exclude monaco's language chunks in stats output for brevity - // https://github.com/microsoft/monaco-editor-webpack-plugin/issues/113 - /^js\/[0-9]+\.js$/, - ], + /^js\/monaco-language-.+\.js$/, + !isProduction && /^js\/licenses.txt$/, + ].filter((item) => !!item), + groupAssetsByChunk: false, + groupAssetsByEmitStatus: false, + groupAssetsByInfo: false, + groupModulesByAttributes: false, + modules: false, + reasons: false, + runtimeModules: false, }, }; |