Update webpack dependency to webpack 5

packages/size-limit/test/get-config.test.js

@@ -188,10 +188,8 @@ it('normalizes import', async () => {
     checks: [
       {
         import: {
-          [fixture(
-            'integration-esm',
-            'index.js'
-          )]: '{ VERY_LONG_NAME_FOR_CONST_TO_TEST_TREE_SHAKING }'
+          [fixture('integration-esm', 'index.js')]:
+            '{ VERY_LONG_NAME_FOR_CONST_TO_TEST_TREE_SHAKING }'
         },
         limit: '1 B',
         highlightLess: true,

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: 141 }])
 })
 
 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 { writeFile } = require('fs').promises
 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')
 
@@ -38,19 +37,14 @@ 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,
+      minimizer: ['...', new CssMinimizerPlugin()]
     },
     module: {
       rules: [
         {
           test: STATIC,
-          use: require.resolve('file-loader')
+          type: 'asset/resource'
         },
         {
           test: /\.css$/,
@@ -70,14 +64,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 {
@@ -86,6 +79,7 @@ module.exports = async function getConfig(limitConfig, check, output) {
     }
   }
 
+  if (!config.plugins) config.plugins = []
   if (limitConfig.why) {
     config.plugins.push(
       new BundleAnalyzerPlugin({

packages/webpack/index.js

@@ -9,10 +9,10 @@ let convertConfig = require('./convert-config')
 let runWebpack = require('./run-webpack')
 let getConfig = require('./get-config')
 
-const WEBPACK_EMPTY_PROJECT = 962
-const WEBPACK_EMPTY_PROJECT_GZIP = 461
-const WEBPACK_EMPTY_PROJECT_IMPORT = 965
-const WEBPACK_EMPTY_PROJECT_IMPORT_GZIP = 473
+const WEBPACK_EMPTY_PROJECT = 0
+const WEBPACK_EMPTY_PROJECT_GZIP = 20
+const WEBPACK_EMPTY_PROJECT_IMPORT = 37
+const WEBPACK_EMPTY_PROJECT_IMPORT_GZIP = 57
 
 function getFiles(stats, check) {
   let entries = {}
@@ -30,11 +30,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

@@ -20,15 +20,13 @@
     "size-limit": "5.0.5"
   },
   "dependencies": {
-    "css-loader": "^5.2.6",
+    "css-loader": "^6.3.0",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "escape-string-regexp": "^4.0.0",
-    "file-loader": "^6.2.0",
     "mkdirp": "^1.0.4",
     "nanoid": "^3.1.28",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "pnp-webpack-plugin": "^1.7.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.44.1",
+    "style-loader": "^3.3.0",
+    "webpack": "^5.56.0",
     "webpack-bundle-analyzer": "^4.4.2"
   },
   "devDependencies": {

packages/webpack/test/index.test.js

@@ -51,7 +51,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: 1883
+        size: 2187
       }
     ]
   })
@@ -66,15 +66,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(2300)
 })
 
 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(160)
 })
 
 it('supports custom webpack config', async () => {
@@ -83,7 +83,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(1154)
 })
 
 it('supports custom entry', async () => {
@@ -92,7 +92,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(566)
 })
 
 it('throws error on unknown entry', async () => {
@@ -123,7 +123,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(37)
 })
 
 it('throws on missed file plugin', async () => {
@@ -263,7 +263,7 @@ it('supports specifying the import', async () => {
         [fixture('module.js')]: '{ methodA }'
       }
     })
-  ).toEqual(79)
+  ).toEqual(83)
 })
 
 it('supports import with multiple files', async () => {
@@ -274,7 +274,7 @@ it('supports import with multiple files', async () => {
         [fixture('module2.js')]: '{ B }'
       }
     })
-  ).toEqual(5)
+  ).toEqual(6)
 })
 
 it('can use `modifyWebpackConfig` for resolution of aliases', async () => {
@@ -285,14 +285,14 @@ it('can use `modifyWebpackConfig` for resolution of aliases', async () => {
         [fixture('referencingAlias.js')]: '{ methodA }'
       },
       modifyWebpackConfig(config) {
-        config.plugins.push(
+        config.plugins = [
           new NormalModuleReplacementPlugin(
             /@fixtures\/module/,
             fixture('module.js')
           )
-        )
+        ]
         return config
       }
     })
-  ).toEqual(79)
+  ).toEqual(83)
 })