diff --git a/src/components/Splash/build/development.mdx b/src/components/Splash/build/development.mdx new file mode 100644 index 000000000000..2362dc0797fc --- /dev/null +++ b/src/components/Splash/build/development.mdx @@ -0,0 +1,3 @@ +```bash +npx webpack --mode development +``` diff --git a/src/components/Splash/build/production.mdx b/src/components/Splash/build/production.mdx new file mode 100644 index 000000000000..e0f67eece410 --- /dev/null +++ b/src/components/Splash/build/production.mdx @@ -0,0 +1,3 @@ +```bash +npx webpack --mode production +``` diff --git a/src/components/Splash/second/left.mdx b/src/components/Splash/second/left.mdx index 8b464206e452..75d5f9f89470 100644 --- a/src/components/Splash/second/left.mdx +++ b/src/components/Splash/second/left.mdx @@ -6,9 +6,6 @@ export default { output: { // the page loads a ` + ``` diff --git a/src/content/configuration/optimization.mdx b/src/content/configuration/optimization.mdx index 2fedeef482f9..38ea65f217a9 100644 --- a/src/content/configuration/optimization.mdx +++ b/src/content/configuration/optimization.mdx @@ -184,7 +184,7 @@ export default { }; ``` -W> If you are using webpack [CLI](/api/cli/), the webpack process will not exit with an error code while this plugin is enabled. If you want webpack to "fail" when using the CLI, please check out the [`bail` option](/api/cli/#advanced-options). +W> If you are using webpack [CLI](/api/cli/), the webpack process will not exit with an error code while this plugin is enabled. If you want webpack to "fail" when using the CLI, please check out the [`bail` option](/configuration/other-options/#bail). ## optimization.avoidEntryIife diff --git a/src/content/index.mdx b/src/content/index.mdx index bed63882c6c3..322285b23c2b 100644 --- a/src/content/index.mdx +++ b/src/content/index.mdx @@ -9,6 +9,8 @@ import FirstRight from "../components/Splash/first/right.mdx"; import SecondLeft from "../components/Splash/second/left.mdx"; import SecondRight from "../components/Splash/second/right.mdx"; import Install from "../components/Splash/install/install.mdx"; +import BuildDevelopment from "../components/Splash/build/development.mdx"; +import BuildProduction from "../components/Splash/build/production.mdx"; ## Install Webpack @@ -40,7 +42,23 @@ import Install from "../components/Splash/install/install.mdx"; -Then run `webpack` on the command-line: HTML, CSS and JavaScript are all handled by webpack itself, so `dist/` ends up with the page and the hashed assets it points at. +Then run webpack on the command-line. HTML, CSS and JavaScript are all handled by webpack itself, so `dist/` ends up with the page and the assets it points at. + +
+
+ +
+
+ +[`--mode development`](/configuration/mode/) leaves the page and the stylesheet unminified and maps the bundle back to your own files in browser devtools, so what you debug looks like what you wrote. + +
+
+ +
+
+ +[`--mode production`](/configuration/mode/) minifies the page, the stylesheet and the script, and drops the code nothing uses. That is the build you deploy. ## Awesome, isn't it? Let's dive in!