Update to webpack v5 (#246)

* Update webpack dependency to webpack 5 * test: update snapshots
ai · Oct 7, 2021 · dd75075 · dd75075
1 parent c49b004
commit dd75075
Show file tree

Hide file tree

Showing 8 changed files with 391 additions and 1,543 deletions.
diff --git a/packages/size-limit/test/__snapshots__/run.test.js.snap b/packages/size-limit/test/__snapshots__/run.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`run allows to use peer dependencies in import 1`] = `
 "  
-  Size: [1m1.49 kB[22m [90mwith all dependencies, minified and gzipped[39m
+  Size: [1m1.18 kB[22m [90mwith all dependencies, minified and gzipped[39m
   
 "
 `;
@@ -34,7 +34,7 @@ exports[`run returns zero bytes for empty file without gzip 1`] = `
 exports[`run shows brotli text when brotli and gzip in config 1`] = `
 "  
   Size limit:   [32m[1m1 kB[22m[39m
-  Size:         [32m[1m-53 B[22m[39m [90mwith all dependencies, minified and brotli[39m
+  Size:         [32m[1m-19 B[22m[39m [90mwith all dependencies, minified and brotli[39m
   Loading time: [32m[1m10 ms[22m[39m [90mon slow 3G[39m
   Running time: [32m[1m1 s  [22m[39m [90mon Snapdragon 410[39m
   Total time:   [32m[1m1.1 s[22m[39m
@@ -45,7 +45,7 @@ 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:   [32m[1m1 kB[22m[39m
-  Size:         [32m[1m-53 B[22m[39m [90mwith all dependencies, minified and brotli[39m
+  Size:         [32m[1m-19 B[22m[39m [90mwith all dependencies, minified and brotli[39m
   Loading time: [32m[1m10 ms[22m[39m [90mon slow 3G[39m
   Running time: [32m[1m1 s  [22m[39m [90mon Snapdragon 410[39m
   Total time:   [32m[1m1.1 s[22m[39m
@@ -77,25 +77,22 @@ exports[`run shows debug 1`] = `
           \\"path\\": \\"/tmp/\\"
         },
         \\"optimization\\": {
-          \\"concatenateModules\\": true
-        },
-        \\"resolve\\": {
-          \\"plugins\\": [
+          \\"concatenateModules\\": true,
+          \\"minimizer\\": [
+            \\"...\\",
             {
-              \\"topLevelLoader\\": {}
+              \\"options\\": {
+                \\"test\\": {},
+                \\"parallel\\": true
+              }
             }
           ]
         },
-        \\"resolveLoader\\": {
-          \\"plugins\\": [
-            {}
-          ]
-        },
         \\"module\\": {
           \\"rules\\": [
             {
               \\"test\\": {},
-              \\"use\\": \\"/node_modules/file-loader/dist/cjs.js\\"
+              \\"type\\": \\"asset/resource\\"
             },
             {
               \\"test\\": {},
@@ -119,132 +116,12 @@ exports[`run shows debug 1`] = `
             }
           ]
         },
-        \\"plugins\\": [
-          {
-            \\"pluginDescriptor\\": {
-              \\"name\\": \\"OptimizeCssAssetsWebpackPlugin\\"
-            },
-            \\"options\\": {
-              \\"assetProcessors\\": [
-                {
-                  \\"phase\\": \\"compilation.optimize-chunk-assets\\",
-                  \\"regExp\\": {}
-                }
-              ],
-              \\"assetNameRegExp\\": {},
-              \\"cssProcessor\\": {
-                \\"version\\": \\"0.0.0\\",
-                \\"plugins\\": [
-                  {
-                    \\"postcssPlugin\\": \\"postcss-discard-comments\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-minify-gradients\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-reduce-initial\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-svgo\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-normalize-display-values\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-reduce-transforms\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-colormin\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-normalize-timing-functions\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-calc\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-convert-values\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-ordered-values\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-minify-selectors\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-minify-params\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-normalize-charset\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-discard-overridden\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-normalize-string\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-normalize-unicode\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-minify-font-values\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-normalize-url\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-normalize-repeat-style\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-normalize-positions\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-normalize-whitespace\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-merge-longhand\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-discard-duplicates\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-merge-rules\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-discard-empty\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"postcss-unique-selectors\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"css-declaration-sorter\\"
-                  },
-                  {
-                    \\"postcssPlugin\\": \\"cssnano-util-raw-cache\\"
-                  }
-                ]
-              },
-              \\"cssProcessorOptions\\": {},
-              \\"cssProcessorPluginOptions\\": {}
-            },
-            \\"phaseAssetProcessors\\": {
-              \\"compilation.optimize-chunk-assets\\": [
-                {
-                  \\"phase\\": \\"compilation.optimize-chunk-assets\\",
-                  \\"regExp\\": {}
-                }
-              ],
-              \\"compilation.optimize-assets\\": [],
-              \\"emit\\": []
-            },
-            \\"deleteAssetsMap\\": {}
-          }
-        ]
+        \\"plugins\\": []
       },
       \\"bundles\\": [
         \\"/tmp/index.js\\"
       ],
-      \\"size\\": 31,
+      \\"size\\": 141,
       \\"loadTime\\": 0.01,
       \\"runTime\\": 1,
       \\"time\\": 1.01,
@@ -255,9 +132,9 @@ exports[`run shows debug 1`] = `
   \\"missed\\": false
 }
   
-  [42m[30mPackage size is 169 B less than limit[39m[49m
+  [42m[30mPackage size is 59 B less than limit[39m[49m
   Size limit:   [32m[1m200 B[22m[39m
-  Size:         [32m[1m31 B [22m[39m [90mwith all dependencies, minified and gzipped[39m
+  Size:         [32m[1m141 B[22m[39m [90mwith all dependencies, minified and gzipped[39m
   Loading time: [32m[1m10 ms[22m[39m [90mon slow 3G[39m
   Running time: [32m[1m1 s  [22m[39m [90mon Snapdragon 410[39m
   Total time:   [32m[1m1.1 s[22m[39m
@@ -294,7 +171,7 @@ exports[`run shows error on time bigger than limit 1`] = `
 "  
   [31mTotal time limit has exceeded[39m
   Time limit:   [31m[1m1 s[22m[39m
-  Size:         [31m[1m31 B [22m[39m [90mwith all dependencies, minified and gzipped[39m
+  Size:         [31m[1m141 B[22m[39m [90mwith all dependencies, minified and gzipped[39m
   Loading time: [31m[1m10 ms[22m[39m [90mon slow 3G[39m
   Running time: [31m[1m1 s  [22m[39m [90mon Snapdragon 410[39m
   Total time:   [31m[1m1.1 s[22m[39m
@@ -307,7 +184,7 @@ exports[`run shows error on time bigger than limit. in silent mode 1`] = `
 "  
   [31mTotal time limit has exceeded[39m
   Time limit:   [31m[1m1 s[22m[39m
-  Size:         [31m[1m31 B [22m[39m [90mwith all dependencies, minified and gzipped[39m
+  Size:         [31m[1m141 B[22m[39m [90mwith all dependencies, minified and gzipped[39m
   Loading time: [31m[1m10 ms[22m[39m [90mon slow 3G[39m
   Running time: [31m[1m1 s  [22m[39m [90mon Snapdragon 410[39m
   Total time:   [31m[1m1.1 s[22m[39m
@@ -611,9 +488,9 @@ Check the real performance cost of your front-end project to users
 
 exports[`run works in integration test in watch 1`] = `
 "  
-  [42m[30mPackage size is 169 B less than limit[39m[49m
+  [42m[30mPackage size is 59 B less than limit[39m[49m
   Size limit:   [32m[1m200 B[22m[39m
-  Size:         [32m[1m31 B [22m[39m [90mwith all dependencies, minified and gzipped[39m
+  Size:         [32m[1m141 B[22m[39m [90mwith all dependencies, minified and gzipped[39m
   Loading time: [32m[1m10 ms[22m[39m [90mon slow 3G[39m
   Running time: [32m[1m1 s  [22m[39m [90mon Snapdragon 410[39m
   Total time:   [32m[1m1.1 s[22m[39m
@@ -634,7 +511,7 @@ exports[`run works in integration test with JSON 1`] = `
   {
     \\"name\\": \\"index.js\\",
     \\"passed\\": true,
-    \\"size\\": 31,
+    \\"size\\": 141,
     \\"running\\": 1,
     \\"loading\\": 0.01
   }
@@ -644,9 +521,9 @@ exports[`run works in integration test with JSON 1`] = `
 
 exports[`run works in integration test with size 1`] = `
 "  
-  [42m[30mPackage size is 169 B less than limit[39m[49m
+  [42m[30mPackage size is 59 B less than limit[39m[49m
   Size limit:   [32m[1m200 B[22m[39m
-  Size:         [32m[1m31 B [22m[39m [90mwith all dependencies, minified and gzipped[39m
+  Size:         [32m[1m141 B[22m[39m [90mwith all dependencies, minified and gzipped[39m
   Loading time: [32m[1m10 ms[22m[39m [90mon slow 3G[39m
   Running time: [32m[1m1 s  [22m[39m [90mon Snapdragon 410[39m
   Total time:   [32m[1m1.1 s[22m[39m
@@ -657,7 +534,7 @@ exports[`run works in integration test with size 1`] = `
 exports[`run works in integration test with time 1`] = `
 "  
   Time limit:   [32m[1m2 s[22m[39m
-  Size:         [32m[1m31 B [22m[39m [90mwith all dependencies, minified and gzipped[39m
+  Size:         [32m[1m141 B[22m[39m [90mwith all dependencies, minified and gzipped[39m
   Loading time: [32m[1m10 ms[22m[39m [90mon slow 3G[39m
   Running time: [32m[1m1 s  [22m[39m [90mon Snapdragon 410[39m
   Total time:   [32m[1m1.1 s[22m[39m

diff --git a/packages/size-limit/test/get-config.test.js b/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,

diff --git a/packages/size-limit/test/index.test.js b/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 () => {

diff --git a/packages/webpack/get-config.js b/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({

diff --git a/packages/webpack/index.js b/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)
       }
     })
 }

diff --git a/packages/webpack/package.json b/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": {