From ffc7391935ef7b358dfe96840edf6b5f0c7cc97c Mon Sep 17 00:00:00 2001 From: chenxsan Date: Mon, 26 Oct 2020 08:53:03 +0800 Subject: [PATCH 01/15] docs(guides): update against webpack 5 --- src/content/guides/getting-started.md | 49 ++++++++++++++------------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md index 498a4b1b33aa..d30420b64186 100644 --- a/src/content/guides/getting-started.md +++ b/src/content/guides/getting-started.md @@ -25,7 +25,7 @@ contributors: - anshumanv --- -webpack is used to compile JavaScript modules. Once [installed](/guides/installation), you can interface with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community. +webpack is used to compile JavaScript modules. Once [installed](/guides/installation), you can interact with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community. W> Since webpack v5.0.0-beta.1 the minimum Node.js version to run webpack is 10.13.0 (LTS) @@ -75,8 +75,9 @@ __index.html__ + Getting Started - + @@ -104,10 +105,9 @@ __package.json__ "author": "", "license": "ISC", "devDependencies": { - "webpack": "^4.20.2", - "webpack-cli": "^3.1.2" - }, - "dependencies": {} + "webpack": "^5.2.0", + "webpack-cli": "^4.1.0" + } } ``` @@ -174,7 +174,7 @@ __dist/index.html__ Getting Started -- +- - @@ -189,11 +189,13 @@ With that said, let's run `npx webpack`, which will take our script at `src/inde ``` bash npx webpack - -... -Built at: 13/06/2018 11:52:07 - Asset Size Chunks Chunk Names -main.js 70.4 KiB 0 [emitted] main +[webpack-cli] Compilation finished +asset main.js 69.3 KiB [emitted] [minimized] (name: main) 1 related asset +runtime modules 1000 bytes 5 modules +cacheable modules 530 KiB + ./src/index.js 257 bytes [built] [code generated] + ./node_modules/lodash/lodash.js 530 KiB [built] [code generated] +webpack 5.2.0 compiled successfully in 2499 ms ... WARNING in configuration @@ -287,11 +289,11 @@ __package.json__ "author": "", "license": "ISC", "devDependencies": { - "webpack": "^4.20.2", - "webpack-cli": "^3.1.2" + "webpack": "^5.2.0", + "webpack-cli": "^4.1.0" }, "dependencies": { - "lodash": "^4.17.5" + "lodash": "^4.17.20" } } ``` @@ -301,19 +303,20 @@ Now the `npm run build` command can be used in place of the `npx` command we use Now run the following command and see if your script alias works: ``` bash -npm run build +$ npm run build -... - Asset Size Chunks Chunk Names -main.js 70.4 KiB 0 [emitted] main ... -WARNING in configuration -The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. -You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/. +[webpack-cli] Compilation finished +asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset +runtime modules 1000 bytes 5 modules +cacheable modules 530 KiB + ./src/index.js 257 bytes [built] [code generated] + ./node_modules/lodash/lodash.js 530 KiB [built] [code generated] +webpack 5.2.0 compiled successfully in 2255 ms ``` -T> Custom parameters can be passed to webpack by adding two dashes between the `npm run build` command and your parameters, e.g. `npm run build -- --colors`. +T> Custom parameters can be passed to webpack by adding two dashes between the `npm run build` command and your parameters, e.g. `npm run build -- --color`. ## Conclusion From 4162df14cbe31c08bb7a6235db2d526021af1ae2 Mon Sep 17 00:00:00 2001 From: chenxsan Date: Mon, 26 Oct 2020 20:04:48 +0800 Subject: [PATCH 02/15] clean up --- src/content/guides/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md index d30420b64186..2e192d393a11 100644 --- a/src/content/guides/getting-started.md +++ b/src/content/guides/getting-started.md @@ -27,7 +27,7 @@ contributors: webpack is used to compile JavaScript modules. Once [installed](/guides/installation), you can interact with webpack either from its [CLI](/api/cli) or [API](/api/node). If you're still new to webpack, please read through the [core concepts](/concepts) and [this comparison](/comparison) to learn why you might use it over the other tools that are out in the community. -W> Since webpack v5.0.0-beta.1 the minimum Node.js version to run webpack is 10.13.0 (LTS) +W> The minimum Node.js version to run webpack 5 is 10.13.0 (LTS) ## Basic Setup From d4de7649c70bffe8ab1b2c6d4091f453e7258340 Mon Sep 17 00:00:00 2001 From: chenxsan Date: Mon, 26 Oct 2020 21:16:37 +0800 Subject: [PATCH 03/15] docs(guides): update asset-management --- src/content/guides/asset-management.md | 372 +++++++++++++------------ 1 file changed, 197 insertions(+), 175 deletions(-) diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.md index 40e6c61b7049..9a3a9dfa5c1c 100644 --- a/src/content/guides/asset-management.md +++ b/src/content/guides/asset-management.md @@ -78,10 +78,7 @@ __webpack.config.js__ + rules: [ + { + test: /\.css$/, -+ use: [ -+         'style-loader', -+         'css-loader', -+       ], ++ use: ['style-loader', 'css-loader'], + }, + ], + }, @@ -90,7 +87,7 @@ __webpack.config.js__ Module loaders can be chained. Each loader in the chain applies transformations to the processed resource. A chain is executed in reverse order. The first loader passes its result (resource with applied transformations) to the next one, and so forth. Finally, webpack expects JavaScript to be returned by the last loader in the chain. -The above order of loaders should be maintained: 'style-loader' comes first and followed by 'css-loader'. If this convention is not followed, webpack is likely to throw errors. +The above order of loaders should be maintained: `'style-loader'` comes first and followed by `'css-loader'`. If this convention is not followed, webpack is likely to throw errors. T> webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case, any file that ends with `.css` will be served to the `style-loader` and the `css-loader`. @@ -143,27 +140,32 @@ __src/index.js__ Now run your build command: ``` bash -npm run build +$ npm run build ... - Asset Size Chunks Chunk Names -bundle.js 76.4 KiB 0 [emitted] main -Entrypoint main = bundle.js -... -``` - -Open up `index.html` in your browser again and you should see that `Hello webpack` is now styled in red. To see what webpack did, inspect the page (don't view the page source, as it won't show you the result, because the `