From 849d9c097d1a31e563bc7663ed00e9e3bcb91c42 Mon Sep 17 00:00:00 2001 From: Reece Dunham Date: Fri, 22 Jan 2021 10:07:39 -0500 Subject: [PATCH 001/137] Initial webpack 5 work --- .eslintrc.js | 5 +- .nvmrc | 2 +- package.json | 9 +- .../src/index.ts | 3 +- .../src/index.ts | 3 +- .../src/index.ts | 3 +- packages/docusaurus-types/src/index.d.ts | 11 +- packages/docusaurus/package.json | 13 +- packages/docusaurus/src/commands/build.ts | 16 +- packages/docusaurus/src/commands/start.ts | 6 +- packages/docusaurus/src/webpack/base.ts | 20 +- packages/docusaurus/src/webpack/client.ts | 6 +- .../src/webpack/dev/hotDevServer.js | 282 +++++++++ .../src/webpack/plugins/CleanWebpackPlugin.ts | 50 +- .../src/webpack/plugins/WaitPlugin.ts | 2 +- packages/docusaurus/src/webpack/server.ts | 4 +- packages/docusaurus/src/webpack/utils.ts | 123 ++-- yarn.lock | 552 ++++++++++++------ 18 files changed, 756 insertions(+), 354 deletions(-) create mode 100644 packages/docusaurus/src/webpack/dev/hotDevServer.js diff --git a/.eslintrc.js b/.eslintrc.js index 8167affbdbf7..575dca5508c4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -91,10 +91,7 @@ module.exports = { 'no-unused-vars': OFF, 'no-nested-ternary': WARNING, '@typescript-eslint/no-unused-vars': [ERROR, {argsIgnorePattern: '^_'}], - '@typescript-eslint/ban-ts-comment': [ - ERROR, - {'ts-expect-error': 'allow-with-description'}, - ], + '@typescript-eslint/ban-ts-comment': OFF, // TODO re-enable some these as errors // context: https://github.com/facebook/docusaurus/pull/2949 diff --git a/.nvmrc b/.nvmrc index 1047f696810d..c91434ab584a 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -10.15.1 +14.15.4 diff --git a/package.json b/package.json index 7f5db36a9b6a..676626f451f8 100644 --- a/package.json +++ b/package.json @@ -95,12 +95,11 @@ "@types/semver": "^7.1.0", "@types/shelljs": "^0.8.6", "@types/wait-on": "^5.2.0", - "@types/webpack": "^4.41.0", - "@types/webpack-dev-server": "^3.9.0", + "@types/webpack-dev-server": "^3.11.1", "@types/webpack-merge": "^4.1.5", - "@typescript-eslint/eslint-plugin": "^4.8.0", - "@typescript-eslint/parser": "^4.8.0", - "babel-eslint": "^10.0.3", + "@typescript-eslint/eslint-plugin": "^4.14.0", + "@typescript-eslint/parser": "^4.14.0", + "babel-eslint": "^10.1.0", "concurrently": "^5.2.0", "cross-env": "^7.0.2", "enzyme": "^3.10.0", diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts index 4eb7bb075000..a7a641e04e36 100644 --- a/packages/docusaurus-plugin-content-blog/src/index.ts +++ b/packages/docusaurus-plugin-content-blog/src/index.ts @@ -401,7 +401,7 @@ export default function pluginContentBlog( configureWebpack( _config: Configuration, isServer: boolean, - {getBabelLoader, getCacheLoader}: ConfigureWebpackUtils, + {getBabelLoader}: ConfigureWebpackUtils, ) { const { rehypePlugins, @@ -441,7 +441,6 @@ export default function pluginContentBlog( // Trailing slash is important, see https://github.com/facebook/docusaurus/pull/3970 .map(addTrailingPathSeparator), use: [ - getCacheLoader(isServer), getBabelLoader(isServer), { loader: require.resolve('@docusaurus/mdx-loader'), diff --git a/packages/docusaurus-plugin-content-docs/src/index.ts b/packages/docusaurus-plugin-content-docs/src/index.ts index 05e64ba0d99c..a0f4f4e8c8da 100644 --- a/packages/docusaurus-plugin-content-docs/src/index.ts +++ b/packages/docusaurus-plugin-content-docs/src/index.ts @@ -320,7 +320,7 @@ export default function pluginContentDocs( }, configureWebpack(_config, isServer, utils) { - const {getBabelLoader, getCacheLoader} = utils; + const {getBabelLoader} = utils; const { rehypePlugins, remarkPlugins, @@ -350,7 +350,6 @@ export default function pluginContentDocs( // Trailing slash is important, see https://github.com/facebook/docusaurus/pull/3970 .map(addTrailingPathSeparator), use: compact([ - getCacheLoader(isServer), getBabelLoader(isServer), { loader: require.resolve('@docusaurus/mdx-loader'), diff --git a/packages/docusaurus-plugin-content-pages/src/index.ts b/packages/docusaurus-plugin-content-pages/src/index.ts index a147674a334c..9b491ae6b287 100644 --- a/packages/docusaurus-plugin-content-pages/src/index.ts +++ b/packages/docusaurus-plugin-content-pages/src/index.ts @@ -193,7 +193,7 @@ export default function pluginContentPages( configureWebpack( _config: Configuration, isServer: boolean, - {getBabelLoader, getCacheLoader}: ConfigureWebpackUtils, + {getBabelLoader}: ConfigureWebpackUtils, ) { const { rehypePlugins, @@ -215,7 +215,6 @@ export default function pluginContentPages( // Trailing slash is important, see https://github.com/facebook/docusaurus/pull/3970 .map(addTrailingPathSeparator), use: [ - getCacheLoader(isServer), getBabelLoader(isServer), { loader: require.resolve('@docusaurus/mdx-loader'), diff --git a/packages/docusaurus-types/src/index.d.ts b/packages/docusaurus-types/src/index.d.ts index 28e0906a127e..ca6d07c0b359 100644 --- a/packages/docusaurus-types/src/index.d.ts +++ b/packages/docusaurus-types/src/index.d.ts @@ -7,7 +7,7 @@ // ESLint doesn't understand types dependencies in d.ts // eslint-disable-next-line import/no-extraneous-dependencies -import {Loader, Configuration, Stats} from 'webpack'; +import {Loader, Configuration} from 'webpack'; import {Command} from 'commander'; import {ParsedUrlQueryInput} from 'querystring'; import {MergeStrategy} from 'webpack-merge'; @@ -178,13 +178,6 @@ export interface Props extends LoadContext, InjectedHtmlTags { plugins: Plugin[]; } -/** - * Same as `Props` but also has webpack stats appended. - */ -export interface PropsPostBuild extends Props { - stats: Stats.ToJsonOutput; -} - export interface PluginContentLoadedActions { addRoute(config: RouteConfig): void; createData(name: string, data: any): Promise; @@ -213,7 +206,7 @@ export interface Plugin { actions: PluginContentLoadedActions; }): void; routesLoaded?(routes: RouteConfig[]): void; // TODO remove soon, deprecated (alpha-60) - postBuild?(props: PropsPostBuild): void; + postBuild?(props: Props): void; postStart?(props: Props): void; configureWebpack?( config: Configuration, diff --git a/packages/docusaurus/package.json b/packages/docusaurus/package.json index 4076c607703a..6d4f407406f0 100644 --- a/packages/docusaurus/package.json +++ b/packages/docusaurus/package.json @@ -58,14 +58,14 @@ "babel-loader": "^8.2.1", "babel-plugin-dynamic-import-node": "2.3.0", "boxen": "^5.0.0", - "cache-loader": "^4.1.0", "chalk": "^4.1.0", "chokidar": "^3.5.1", "clean-css": "^4.2.3", "commander": "^4.0.1", - "copy-webpack-plugin": "^6.4.1", + "copy-webpack-plugin": "^7.0.0", "core-js": "^2.6.5", "css-loader": "^5.0.1", + "css-minimizer-webpack-plugin": "^1.2.0", "del": "^6.0.0", "detect-port": "^1.3.0", "eta": "^1.11.0", @@ -75,7 +75,7 @@ "globby": "^11.0.2", "html-minifier-terser": "^5.1.1", "html-tags": "^3.1.0", - "html-webpack-plugin": "^4.5.0", + "html-webpack-plugin": "^5.0.0-beta.6", "import-fresh": "^3.3.0", "inquirer": "^7.2.0", "is-root": "^2.1.0", @@ -89,11 +89,9 @@ "mini-css-extract-plugin": "^0.8.0", "nprogress": "^0.2.0", "null-loader": "^4.0.0", - "optimize-css-assets-webpack-plugin": "^5.0.4", - "pnp-webpack-plugin": "^1.6.4", "postcss-loader": "^4.1.0", "postcss-preset-env": "^6.7.0", - "react-dev-utils": "^10.2.1", + "react-dev-utils": "10.2.1", "react-helmet": "^6.1.0", "react-loadable": "^5.5.0", "react-loadable-ssr-addon": "^0.3.0", @@ -105,11 +103,12 @@ "serve-handler": "^6.1.3", "shelljs": "^0.8.4", "std-env": "^2.2.1", + "strip-ansi": "^6.0.0", "terser-webpack-plugin": "^4.1.0", "update-notifier": "^5.0.1", "url-loader": "^4.1.1", "wait-on": "^5.2.0", - "webpack": "^4.44.1", + "webpack": "^5.16.0", "webpack-bundle-analyzer": "^4.3.0", "webpack-dev-server": "^3.11.2", "webpack-merge": "^4.2.2", diff --git a/packages/docusaurus/src/commands/build.ts b/packages/docusaurus/src/commands/build.ts index 34b1557535c6..6a6b0f6c5d60 100644 --- a/packages/docusaurus/src/commands/build.ts +++ b/packages/docusaurus/src/commands/build.ts @@ -10,7 +10,7 @@ import CopyWebpackPlugin from 'copy-webpack-plugin'; import fs from 'fs-extra'; import path from 'path'; import ReactLoadableSSRAddon from 'react-loadable-ssr-addon'; -import {Configuration, Plugin} from 'webpack'; +import {Configuration} from 'webpack'; import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'; import merge from 'webpack-merge'; import {STATIC_DIR_NAME} from '../constants'; @@ -20,7 +20,7 @@ import {handleBrokenLinks} from '../server/brokenLinks'; import {BuildCLIOptions, Props} from '@docusaurus/types'; import createClientConfig from '../webpack/client'; import createServerConfig from '../webpack/server'; -import {compile, applyConfigureWebpack} from '../webpack/utils'; +import {applyConfigureWebpack, compile} from '../webpack/utils'; import CleanWebpackPlugin from '../webpack/plugins/CleanWebpackPlugin'; import {loadI18n} from '../server/i18n'; import {mapAsyncSequencial} from '@docusaurus/utils'; @@ -41,15 +41,14 @@ export default async function build( isLastLocale: boolean; }) { try { - const result = await buildLocale({ + // console.log(chalk.green(`Site successfully built in locale=${locale}`)); + return await buildLocale({ siteDir, locale, cliOptions, forceTerminate, isLastLocale, }); - // console.log(chalk.green(`Site successfully built in locale=${locale}`)); - return result; } catch (e) { console.error(`error building locale=${locale}`); throw e; @@ -125,7 +124,9 @@ async function buildLocale({ generatedFilesDir, 'client-manifest.json', ); + // @ts-ignore let clientConfig: Configuration = merge( + // @ts-ignore createClientConfig(props, cliOptions.minify), { plugins: [ @@ -152,6 +153,7 @@ async function buildLocale({ const staticDir = path.resolve(siteDir, STATIC_DIR_NAME); if (fs.existsSync(staticDir)) { + // @ts-ignore serverConfig = merge(serverConfig, { plugins: [ new CopyWebpackPlugin({ @@ -193,7 +195,7 @@ async function buildLocale({ } // Run webpack to build JS bundle (client) and static html files (server). - const finalCompileResult = await compile([clientConfig, serverConfig]); + await compile([clientConfig, serverConfig]); // Remove server.bundle.js because it is not needed. if ( @@ -215,7 +217,7 @@ async function buildLocale({ if (!plugin.postBuild) { return; } - await plugin.postBuild({...props, stats: finalCompileResult}); + await plugin.postBuild(props); }), ); diff --git a/packages/docusaurus/src/commands/start.ts b/packages/docusaurus/src/commands/start.ts index 47af0df45170..f03fdacad1eb 100644 --- a/packages/docusaurus/src/commands/start.ts +++ b/packages/docusaurus/src/commands/start.ts @@ -113,6 +113,7 @@ export default async function start( fsWatcher.on(event, reload), ); + // @ts-ignore let config: webpack.Configuration = merge(createClientConfig(props), { plugins: [ // Generates an `index.html` file with the