chore: update docs to webpack 5 (#13635)

package.json

@@ -34,13 +34,14 @@
     "@octokit/core": "^3.1.2",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
-    "@vue/compiler-sfc": "^3.0.2",
+    "@vue/compiler-sfc": "^3.0.11",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
     "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.2",
     "cross-spawn": "^6.0.5",
     "css-loader": "^5.0.0",
+    "css-minimizer-webpack-plugin": "^2.0.0",
     "eslint": "^7.11.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "^2.22.1",
@@ -61,25 +62,19 @@
     "jest-serializer-html": "^7.0.0",
     "lerna": "^3.16.2",
     "moment": "^2.27.0",
-    "sass": "^1.27.0",
-    "sass-loader": "^10.0.4",
+    "sass": "^1.32.12",
+    "sass-loader": "^11.1.0",
     "semver": "^6.2.0",
     "shelljs": "^0.8.4",
-    "stylus-loader": "^4.1.1",
     "typescript": "^4.0.3",
-    "vue": "^3.0.7",
+    "vue": "^3.0.11",
     "vue-analytics": "^5.16.1",
     "vue-loader": "^16.1.2",
     "vue-meta": "^2.4.0",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1",
-    "webpack": "^5.2.0",
-    "webpack-cli": "^4.1.0",
-    "webpack-dev-server": "3.9.0",
-    "webpack-merge": "^5.2.0"
-  },
-  "resolutions": {
-    "workbox-webpack-plugin": "^5.1.3",
-    "@vue/cli-service/webpack-dev-server": "3.9.0"
+    "webpack": "^5.37.0",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "4.0.0-beta.3",
+    "webpack-merge": "^5.7.3"
   }
 }

packages/api-generator/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "deepmerge": "^4.0.0",
     "rimraf": "^3.0.2",
-    "vue": "^3.0.7",
+    "vue": "^3.0.11",
     "vuetify": "^3.0.0-alpha.5"
   },
   "devDependencies": {

packages/docs/build/api-plugin.js

@@ -135,7 +135,7 @@ class ApiPlugin {
     })
 
     compiler.hooks.watchRun.tap('ApiPlugin', async comp => {
-      const changedTimes = comp.watchFileSystem.watcher.mtimes
+      const changedTimes = comp.watchFileSystem.watcher.getTimeInfoEntries()
 
       changedFiles = Object.keys(changedTimes).filter(filePath => {
         return sourcePaths.some(path => filePath.startsWith(path))

packages/docs/build/pages-plugin.js

@@ -72,7 +72,7 @@ class Plugin {
     })
 
     compiler.hooks.watchRun.tapPromise('PagesPlugin', async compiler => {
-      shouldWrite = !!Object.keys(compiler.watchFileSystem.watcher.mtimes)
+      shouldWrite = !!Object.keys(compiler.watchFileSystem.watcher.getTimeInfoEntries())
         .find(path => path.indexOf('src/pages'))
     })
   }

packages/docs/build/sitemap.js

@@ -5,10 +5,13 @@ const paths = []
 for (const route of routes) {
   paths.push({
     path: route.fullPath,
-    lastmod: new Date(),
-    priority: route.fullPath === '/' ? '1.0' : '0.8',
+    lastmod: new Date().toISOString(),
+    priority: route.fullPath === '/' ? 1 : 0.8,
     changefreq: 'daily',
   })
 }
 
-module.exports = new SitemapPlugin('https://vuetifyjs.com', paths)
+module.exports = new SitemapPlugin({
+  base: 'https://vuetifyjs.com',
+  paths,
+})

packages/docs/package.json

@@ -11,18 +11,16 @@
   },
   "workspaces": {
     "nohoist": [
-      "@vue/**",
-      "vue-cli-plugin-vuetify",
-      "vuetify-loader",
-      "frontmatter-markdown-loader",
-      "vue-server-renderer",
-      "webpack",
-      "webpack-dev-server",
-      "webpack-dev-middleware"
+      "**/@vue/cli-service/**",
+      "**/vue-server-renderer",
+      "**/vue-template-compiler",
+      "**/vue-cli-plugin-vuetify",
+      "**/frontmatter-markdown-loader",
+      "**/vuetify-loader"
     ]
   },
   "scripts": {
-    "build": "yarn build:client && yarn build:server && yarn prerender",
+    "build": "yarn build:client",
     "dev": "yarn serve",
     "serve": "vue-cli-service serve",
     "lint": "yarn lint:md && vue-cli-service lint --no-fix",
@@ -37,32 +35,31 @@
   },
   "dependencies": {
     "algoliasearch": "^4.8.5",
-    "core-js": "^3.6.4",
+    "core-js": "^3.12.1",
     "node-fetch": "^2.6.0",
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.12",
     "vue-i18n": "^8.17.7",
     "vue-instantsearch": "^3.4.3",
     "vue-router": "^3.1.6",
     "vuetify": "npm:vuetify@^2.4.0",
-    "vuex": "^3.4.0",
-    "webpack-node-externals": "^2.5.1"
+    "webpack-node-externals": "^3.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.3",
-    "@vue/cli-plugin-eslint": "~4.5.4",
-    "@vue/cli-plugin-pwa": "^4.5.4",
-    "@vue/cli-plugin-router": "~4.5.3",
-    "@vue/cli-plugin-vuex": "~4.5.3",
-    "@vue/cli-service": "~4.5.3",
+    "@vue/cli-plugin-babel": "~5.0.0-beta.1",
+    "@vue/cli-plugin-eslint": "~5.0.0-beta.1",
+    "@vue/cli-plugin-pwa": "~5.0.0-beta.1",
+    "@vue/cli-plugin-router": "~5.0.0-beta.1",
+    "@vue/cli-plugin-vuex": "~5.0.0-beta.1",
+    "@vue/cli-service": "~5.0.0-beta.1",
     "@vuetify/api-generator": "^3.0.0-alpha.5",
     "@vuetify/vue-cli-plugin-base": "~0.3.5",
     "cosmicjs": "^3.2.43",
     "date-fns": "^2.14.0",
-    "frontmatter-markdown-loader": "^3.5.0",
+    "frontmatter-markdown-loader": "^3.6.2",
     "git-date-extractor": "^3.0.0",
-    "html-loader": "^1.1.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.3.1",
     "intersection-observer": "^0.11.0",
     "json-loader": "^0.5.7",
     "local-web-server": "^4.2.1",
@@ -76,12 +73,11 @@
     "marked": "^1.1.0",
     "minify-css-string": "^1.0.0",
     "mkdirp": "^1.0.4",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "raw-loader": "^4.0.1",
-    "sass-loader": "^9.0.2",
-    "sitemap-webpack-plugin": "^0.8.1",
+    "raw-loader": "^4.0.2",
+    "sitemap-webpack-plugin": "^1.1.0",
     "vee-validate": "^3.3.7",
-    "vue-cli-plugin-vuetify": "~2.0.7",
+    "vuex": "^3.5.1",
+    "vue-cli-plugin-vuetify": "^2.4.0",
     "vue-cookies": "^1.7.0",
     "vue-gtag": "^1.6.5",
     "vue-meta": "^2.4.0",
@@ -93,9 +89,8 @@
     "vuex-pathify": "^1.4.1",
     "vuex-router-sync": "^5.0.0",
     "webfontloader": "^1.6.28",
-    "webpack": "^4.0.0",
-    "webpack-bundle-analyzer": "^3.8.0",
-    "webpack-virtual-modules": "^0.2.2",
+    "webpack-bundle-analyzer": "^4.4.1",
+    "webpack-virtual-modules": "^0.4.2",
     "workbox-precaching": "^5.1.3",
     "workbox-routing": "^5.1.3",
     "workbox-strategies": "^5.1.3"

packages/docs/plugins/@vuetify/config/client.js

@@ -53,8 +53,8 @@ module.exports = config => {
     .minimize(IS_PROD)
     .minimizer('css')
     .use(require('terser-webpack-plugin'))
-    .use(require('optimize-css-assets-webpack-plugin'), [{
-      cssProcessorOptions: { safe: true },
+    .use(require('css-minimizer-webpack-plugin'), [{
+      minimizerOptions: { safe: true },
     }])
 
   config.target('web')

packages/docs/src/components/Markup.vue

@@ -14,7 +14,7 @@
 
 <script>
   // Imports
-  import 'markdown-it-prism'
+  import 'prismjs'
   import 'prismjs/themes/prism.css'
   import 'prismjs/components/prism-bash'
   import 'prismjs/components/prism-css'

packages/vuetify/build/config.js

@@ -1,7 +1,7 @@
 const webpack = require('webpack')
 const { merge } = require('webpack-merge')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 
 const base = require('./webpack.prod.config')
 
@@ -34,15 +34,12 @@ const builds = {
     },
     optimization: {
       minimizer: [
-        new OptimizeCssAssetsPlugin({
-          assetNameRegExp: /\.css$/g,
-          cssProcessor: require('cssnano'),
-          cssProcessorOptions: {
+        new CssMinimizerPlugin({
+          minimizerOptions: {
             discardComments: { removeAll: true },
             postcssZindex: false,
             reduceIdents: false
           },
-          canPrint: false
         })
       ],
     },

packages/vuetify/build/webpack.base.config.js

@@ -13,8 +13,8 @@ const cssLoaders = [
   // https://github.com/webpack-contrib/mini-css-extract-plugin#user-content-advanced-configuration-example
   // TODO: remove style-loader: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/34
   extractCSS ? MiniCssExtractPlugin.loader : 'style-loader',
-  { loader: 'css-loader', options: { sourceMap: !isProd } },
-  { loader: 'postcss-loader', options: { sourceMap: !isProd } }
+  { loader: 'css-loader', options: { sourceMap: true } },
+  { loader: 'postcss-loader', options: { sourceMap: true } }
 ]
 
 const sassLoaders = [
@@ -44,6 +44,7 @@ const scssLoaders = [
 ]
 
 module.exports = {
+  target: 'web',
   mode: isProd ? 'production' : 'development',
   devtool: 'source-map',
   resolve: {

packages/vuetify/build/webpack.dev.config.js

@@ -9,7 +9,6 @@ const baseWebpackConfig = require('./webpack.base.config')
 const resolve = file => path.resolve(__dirname, file)
 
 module.exports = merge(baseWebpackConfig, {
-  target: 'web',
   entry: ['./dev/index.js'],
   output: {
     filename: '[name].js',
@@ -63,11 +62,10 @@ module.exports = merge(baseWebpackConfig, {
     ]
   },
   devServer: {
-    contentBase: resolve('../dev'),
-    publicPath: '/',
+    static: resolve('../dev'),
     host: process.env.HOST || 'localhost',
     port: process.env.PORT || '8080',
-    disableHostCheck: true,
+    firewall: false,
   },
   plugins: [
     new VueLoader.VueLoaderPlugin(),

packages/vuetify/package.json

@@ -66,7 +66,7 @@
   },
   "devDependencies": {
     "@cypress/vue": "^3.0.1",
-    "@cypress/webpack-dev-server": "1.1.5",
+    "@cypress/webpack-dev-server": "^1.3.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.34",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/vue-fontawesome": "^3.0.0-3",
@@ -84,28 +84,26 @@
     "babel-polyfill": "^6.26.0",
     "concurrently": "^4.1.1",
     "cssnano": "^4.1.10",
-    "cypress": "^7.2.0",
+    "cypress": "^7.4.0",
     "deepmerge": "^4.2.2",
     "dotenv": "^8.0.0",
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-jest": "^24.1.0",
-    "file-loader": "^6.1.1",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^5.2.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "html-webpack-plugin": "5.3.1",
     "identity-obj-proxy": "^3.0.0",
     "jest-canvas-mock": "^2.3.0",
-    "mini-css-extract-plugin": "^1.1.2",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
-    "postcss-loader": "^4.0.4",
+    "mini-css-extract-plugin": "^1.6.0",
+    "postcss-loader": "^5.2.0",
     "style-loader": "^2.0.0",
-    "stylus": "^0.54.8",
-    "url-loader": "^2.1.0",
+    "url-loader": "^4.1.1",
     "vue-meta": "^2.4.0",
-    "vuetify-loader": "^1.3.0"
+    "vuetify-loader": "^1.7.2"
   },
   "peerDependencies": {
-    "vue": "^3.0.7"
+    "vue": "^3.0.11"
   },
   "publishConfig": {
     "access": "public"