Update webpack to v5

packages/size-limit/test/__snapshots__/run.test.js.snap

@@ -2,33 +2,33 @@
 
 exports[`run allows to use peer dependencies in import 1`] = `
 "  
-  Size: 2.44 KB with all dependencies, minified and gzipped
+  Size: 1.18 KB with all dependencies, minified and gzipped
 
 "
 `;
 
 exports[`run returns zero bytes for empty file 1`] = `
 "  
   Size limit: 0 B
-  Size:       0 B with all dependencies, minified and gzipped
+  Size:       -441 B with all dependencies, minified and gzipped
 
 "
 `;
 
 exports[`run returns zero bytes for empty file without gzip 1`] = `
 "  
   Size limit: 0 B
-  Size:       0 B with all dependencies and minified
+  Size:       -962 B with all dependencies and minified
 
 "
 `;
 
 exports[`run shows brotli text when brotli and gzip in config 1`] = `
 "  
   Size limit:   1 KB
-  Size:         -53 B with all dependencies, minified and brotli
-  Loading time: 10 ms on slow 3G
-  Running time: 1 s   on Snapdragon 410
+  Size:         -460 B with all dependencies, minified and brotli
+  Loading time: 10 ms  on slow 3G
+  Running time: 1 s    on Snapdragon 410
   Total time:   1.1 s
 
 "
@@ -37,9 +37,9 @@ exports[`run shows brotli text when brotli and gzip in config 1`] = `
 exports[`run shows brotli text when only brotli in config 1`] = `
 "  
   Size limit:   1 KB
-  Size:         -53 B with all dependencies, minified and brotli
-  Loading time: 10 ms on slow 3G
-  Running time: 1 s   on Snapdragon 410
+  Size:         -460 B with all dependencies, minified and brotli
+  Loading time: 10 ms  on slow 3G
+  Running time: 1 s    on Snapdragon 410
   Total time:   1.1 s
 
 "
@@ -68,20 +68,23 @@ exports[`run shows debug 1`] = `
           \\"path\\": \\"/tmp/\\"
         },
         \\"optimization\\": {
-          \\"concatenateModules\\": true
-        },
-        \\"resolve\\": {
-          \\"plugins\\": [
+          \\"concatenateModules\\": true,
+          \\"minimize\\": true,
+          \\"minimizer\\": [
+            \\"...\\",
             {
-              \\"topLevelLoader\\": {}
+              \\"options\\": {
+                \\"test\\": {},
+                \\"sourceMap\\": false,
+                \\"cache\\": true,
+                \\"parallel\\": true,
+                \\"minimizerOptions\\": {
+                  \\"preset\\": \\"default\\"
+                }
+              }
             }
           ]
         },
-        \\"resolveLoader\\": {
-          \\"plugins\\": [
-            {}
-          ]
-        },
         \\"module\\": {
           \\"rules\\": [
             {
@@ -109,41 +112,12 @@ exports[`run shows debug 1`] = `
               ]
             }
           ]
-        },
-        \\"plugins\\": [
-          {
-            \\"pluginDescriptor\\": {
-              \\"name\\": \\"OptimizeCssAssetsWebpackPlugin\\"
-            },
-            \\"options\\": {
-              \\"assetProcessors\\": [
-                {
-                  \\"phase\\": \\"compilation.optimize-chunk-assets\\",
-                  \\"regExp\\": {}
-                }
-              ],
-              \\"assetNameRegExp\\": {},
-              \\"cssProcessorOptions\\": {},
-              \\"cssProcessorPluginOptions\\": {}
-            },
-            \\"phaseAssetProcessors\\": {
-              \\"compilation.optimize-chunk-assets\\": [
-                {
-                  \\"phase\\": \\"compilation.optimize-chunk-assets\\",
-                  \\"regExp\\": {}
-                }
-              ],
-              \\"compilation.optimize-assets\\": [],
-              \\"emit\\": []
-            },
-            \\"deleteAssetsMap\\": {}
-          }
-        ]
+        }
       },
       \\"bundles\\": [
         \\"/tmp/index.js\\"
       ],
-      \\"size\\": 31,
+      \\"size\\": -309,
       \\"loadTime\\": 0.01,
       \\"runTime\\": 1,
       \\"time\\": 1.01,
@@ -154,9 +128,9 @@ exports[`run shows debug 1`] = `
 }
 
   Size limit:   200 B
-  Size:         31 B  with all dependencies, minified and gzipped
-  Loading time: 10 ms on slow 3G
-  Running time: 1 s   on Snapdragon 410
+  Size:         -309 B with all dependencies, minified and gzipped
+  Loading time: 10 ms  on slow 3G
+  Running time: 1 s    on Snapdragon 410
   Total time:   1.1 s
 
 "
@@ -191,9 +165,9 @@ exports[`run shows error on time bigger than limit 1`] = `
 "  
   Total time limit has exceeded
   Time limit:   1 s
-  Size:         31 B  with all dependencies, minified and gzipped
-  Loading time: 10 ms on slow 3G
-  Running time: 1 s   on Snapdragon 410
+  Size:         -309 B with all dependencies, minified and gzipped
+  Loading time: 10 ms  on slow 3G
+  Running time: 1 s    on Snapdragon 410
   Total time:   1.1 s
 
   Try to reduce size or increase limit in \\"size-limit\\" section of package.json
@@ -494,9 +468,9 @@ Check the real performance cost of your front-end project to users
 exports[`run works in integration test in watch 1`] = `
 "  
   Size limit:   200 B
-  Size:         31 B  with all dependencies, minified and gzipped
-  Loading time: 10 ms on slow 3G
-  Running time: 1 s   on Snapdragon 410
+  Size:         -309 B with all dependencies, minified and gzipped
+  Loading time: 10 ms  on slow 3G
+  Running time: 1 s    on Snapdragon 410
   Total time:   1.1 s
 
 "
@@ -505,7 +479,7 @@ exports[`run works in integration test in watch 1`] = `
 exports[`run works in integration test with ESM 1`] = `
 "  
   Size limit: 1 B
-  Size:       1 B with all dependencies, minified and gzipped
+  Size:       -415 B with all dependencies, minified and gzipped
 
 "
 `;
@@ -515,7 +489,7 @@ exports[`run works in integration test with JSON 1`] = `
   {
     \\"name\\": \\"index.js\\",
     \\"passed\\": true,
-    \\"size\\": 31,
+    \\"size\\": -309,
     \\"running\\": 1,
     \\"loading\\": 0.01
   }
@@ -526,9 +500,9 @@ exports[`run works in integration test with JSON 1`] = `
 exports[`run works in integration test with size 1`] = `
 "  
   Size limit:   200 B
-  Size:         31 B  with all dependencies, minified and gzipped
-  Loading time: 10 ms on slow 3G
-  Running time: 1 s   on Snapdragon 410
+  Size:         -309 B with all dependencies, minified and gzipped
+  Loading time: 10 ms  on slow 3G
+  Running time: 1 s    on Snapdragon 410
   Total time:   1.1 s
 
 "
@@ -537,9 +511,9 @@ exports[`run works in integration test with size 1`] = `
 exports[`run works in integration test with time 1`] = `
 "  
   Time limit:   2 s
-  Size:         31 B  with all dependencies, minified and gzipped
-  Loading time: 10 ms on slow 3G
-  Running time: 1 s   on Snapdragon 410
+  Size:         -309 B with all dependencies, minified and gzipped
+  Loading time: 10 ms  on slow 3G
+  Running time: 1 s    on Snapdragon 410
   Total time:   1.1 s
 
 "

packages/size-limit/test/index.test.js

@@ -9,7 +9,7 @@ it('has JS API', async () => {
     [webpackPlugin, filePlugin],
     [join(__dirname, 'fixtures', 'integration', 'index.js')]
   )
-  expect(result).toEqual([{ size: 31 }])
+  expect(result).toEqual([{ size: -309 }])
 })
 
 it('works with file module only', async () => {

packages/webpack/get-config.js

@@ -1,8 +1,7 @@
 let { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
-let PnpWebpackPlugin = require('pnp-webpack-plugin')
 let { promisify } = require('util')
 let escapeRegexp = require('escape-string-regexp')
-let OptimizeCss = require('optimize-css-assets-webpack-plugin')
+let CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 let { join } = require('path')
 let mkdirp = require('mkdirp')
 let fs = require('fs')
@@ -35,13 +34,9 @@ module.exports = async function getConfig (limitConfig, check, output) {
       path: output
     },
     optimization: {
-      concatenateModules: !check.disableModuleConcatenation
-    },
-    resolve: {
-      plugins: [PnpWebpackPlugin]
-    },
-    resolveLoader: {
-      plugins: [PnpWebpackPlugin.moduleLoader(module)]
+      concatenateModules: !check.disableModuleConcatenation,
+      minimize: true,
+      minimizer: ['...', new CssMinimizerPlugin()]
     },
     module: {
       rules: [
@@ -67,14 +62,13 @@ module.exports = async function getConfig (limitConfig, check, output) {
           ]
         }
       ]
-    },
-    plugins: [new OptimizeCss()]
+    }
   }
 
   if (check.ignore && check.ignore.length > 0) {
     let escaped = check.ignore.map(i => escapeRegexp(i))
     let ignorePattern = new RegExp(`^(${escaped.join('|')})($|/)`)
-    config.externals = (context, request, callback) => {
+    config.externals = ({ request }, callback) => {
       if (ignorePattern.test(request)) {
         callback(null, 'root a')
       } else {
@@ -84,6 +78,8 @@ module.exports = async function getConfig (limitConfig, check, output) {
   }
 
   if (limitConfig.why) {
+    if (!config.plugins) config.plugins = []
+
     config.plugins.push(
       new BundleAnalyzerPlugin({
         openAnalyzer: process.env.NODE_ENV !== 'test',

packages/webpack/index.js

@@ -31,11 +31,11 @@ function getFiles (stats, check) {
 
   return Object.keys(entries)
     .reduce((assets, i) => assets.concat(entries[i].assets), [])
-    .map(i => {
+    .map(({ name }) => {
       if (check.webpackConfig.output && check.webpackConfig.output.path) {
-        return join(check.webpackConfig.output.path, i)
+        return join(check.webpackConfig.output.path, name)
       } else {
-        return join(process.cwd(), 'dist', i)
+        return join(process.cwd(), 'dist', name)
       }
     })
 }

packages/webpack/package.json

@@ -21,16 +21,15 @@
   },
   "dependencies": {
     "css-loader": "^5.0.1",
+    "css-minimizer-webpack-plugin": "^1.1.5",
     "escape-string-regexp": "^4.0.0",
     "file-loader": "^6.2.0",
     "mkdirp": "^1.0.4",
     "nanoid": "^3.1.16",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "pnp-webpack-plugin": "^1.6.4",
     "rimraf": "^3.0.2",
     "style-loader": "^2.0.0",
-    "webpack": "^4.44.1",
-    "webpack-bundle-analyzer": "^3.9.0"
+    "webpack": "^5.5.0",
+    "webpack-bundle-analyzer": "^4.1.0"
   },
   "devDependencies": {
     "redux": "^4.0.5"

packages/webpack/test/index.test.js

@@ -54,7 +54,7 @@ it('uses webpack to make bundle', async () => {
         webpackOutput: config.checks[0].webpackOutput,
         webpackConfig: config.checks[0].webpackConfig,
         bundles: [join(config.checks[0].webpackOutput, 'index.js')],
-        size: 2849
+        size: 2710
       }
     ]
   })
@@ -69,15 +69,15 @@ it('supports non-JS require', async () => {
   }
   await run(config)
   expect(config.checks[0].size).toBeGreaterThan(1450)
-  expect(config.checks[0].size).toBeLessThan(1700)
+  expect(config.checks[0].size).toBeLessThan(1800)
 })
 
 it('supports ignore', async () => {
   let config = {
     checks: [{ files: fixture('big.js'), ignore: ['redux'] }]
   }
   await run(config)
-  expect(config.checks[0].size).toEqual(27)
+  expect(config.checks[0].size).toEqual(-292)
 })
 
 it('supports custom webpack config', async () => {
@@ -86,7 +86,7 @@ it('supports custom webpack config', async () => {
     checks: [{ config: fixture('webpack.config.js') }]
   }
   await run(config)
-  expect(config.checks[0].size).toEqual(1840)
+  expect(config.checks[0].size).toEqual(509)
 })
 
 it('supports custom entry', async () => {
@@ -95,7 +95,7 @@ it('supports custom entry', async () => {
     checks: [{ config: fixture('webpack.config.js'), entry: ['small'] }]
   }
   await run(config)
-  expect(config.checks[0].size).toEqual(688)
+  expect(config.checks[0].size).toEqual(23)
 })
 
 it('throws error on unknown entry', async () => {
@@ -126,7 +126,7 @@ it('allows to disable gzip', async () => {
     checks: [{ files: [fixture('small.js')], gzip: false }]
   }
   await run(config)
-  expect(config.checks[0].size).toEqual(36)
+  expect(config.checks[0].size).toEqual(-925)
 })
 
 it('throws on missed file plugin', async () => {
@@ -247,7 +247,7 @@ it('supports specifying the import', async () => {
         [fixture('module.js')]: '{ A }'
       }
     })
-  ).toEqual(1)
+  ).toEqual(-415)
 
   expect(
     await getSize({
@@ -257,15 +257,15 @@ it('supports specifying the import', async () => {
       },
       gzip: false
     })
-  ).toEqual(1)
+  ).toEqual(-927)
 
   expect(
     await getSize({
       import: {
         [fixture('module.js')]: '{ methodA }'
       }
     })
-  ).toEqual(79)
+  ).toEqual(-333)
 })
 
 it('supports import with multiple files', async () => {
@@ -276,5 +276,5 @@ it('supports import with multiple files', async () => {
         [fixture('module2.js')]: '{ B }'
       }
     })
-  ).toEqual(5)
+  ).toEqual(-410)
 })