From bde22ec6b20b5d31fe19323d4b3e0ffe31603968 Mon Sep 17 00:00:00 2001 From: Rob Wierzbowski Date: Wed, 28 Nov 2018 11:16:16 -0500 Subject: [PATCH 1/4] Small readme improvements, remove the word "simple" Most of us are reading the docs because we don't know how to do something, and it's not fun to hear that the concept we're having a hard time understanding is "simple" or "easy". I'd love you to show me how simple it is instead. A great reference: https://css-tricks.com/words-avoid-educational-writing/ Updated some language around `contenthash` as well, hopefully it's a little more direct. Let me know what you think. --- src/content/guides/caching.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/guides/caching.md b/src/content/guides/caching.md index 941d588c5778..abf89158f66d 100644 --- a/src/content/guides/caching.md +++ b/src/content/guides/caching.md @@ -24,7 +24,7 @@ This guide focuses on the configuration needed to ensure files produced by webpa ## Output Filenames -A simple way to ensure the browser picks up changed files is by using `output.filename` [substitutions](/configuration/output#output-filename). The `[hash]` substitution can be used to include a build-specific hash in the filename, however it's even better to use the `[contenthash]` substitution which is the hash of the content of a file, which is different for each asset. +We can use the `output.filename` [substitutions](/configuration/output#output-filename) setting to define the names of our output files. Webpack provides a method of templating the filenames using bracketed strings called **substitutions**. The `[contenthash]` substitution will add a unique hash based on the content of an asset. When the asset's content changes, `[contenthash]` will change as well. Let's get our project set up using the example from [getting started](/guides/getting-started) with the `plugins` from [output management](/guides/output-management), so we don't have to deal with maintaining our `index.html` file manually: @@ -90,7 +90,7 @@ W> Output may differ depending on your current webpack version. Newer versions m ## Extracting Boilerplate -As we learned in [code splitting](/guides/code-splitting), the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) can be used to split modules out into separate bundles. webpack provides an optimization feature which does split out runtime code into a separate chunk(s) according to the options provided, simply use [`optimization.runtimeChunk`](/configuration/optimization/#optimization-runtimechunk) set to `single` for creating one runtime bundle: +As we learned in [code splitting](/guides/code-splitting), the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) can be used to split modules out into separate bundles. Webpack provides an optimization feature to split runtime code into a separate chunk using the [`optimization.runtimeChunk`](/configuration/optimization/#optimization-runtimechunk) option. Set it to `single` to create a single runtime bundle for all chunks: __webpack.config.js__ @@ -338,4 +338,4 @@ We can see that both builds yielded `55e79e5927a639d21a1b` in the `vendor` bundl ## Conclusion -Caching gets messy. Plain and simple. However the walk-through above should give you a running start to deploying consistent, cacheable assets. See the _Further Reading_ section below to learn more. +Caching can be complicated, but the benefits to our application's users make it worth it. Hopefully this guide has given you a good foundation for deploying consistent, cacheable assets. See the _Further Reading_ section below to learn more. From 4cd65c043001564989f473fdc3ff1e47b2b04a8c Mon Sep 17 00:00:00 2001 From: Rob Wierzbowski Date: Wed, 28 Nov 2018 11:40:08 -0500 Subject: [PATCH 2/4] Switch "Webpack" (caps) to "webpack" as per brand guidelines --- src/content/guides/caching.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/guides/caching.md b/src/content/guides/caching.md index abf89158f66d..321e76621d3d 100644 --- a/src/content/guides/caching.md +++ b/src/content/guides/caching.md @@ -24,7 +24,7 @@ This guide focuses on the configuration needed to ensure files produced by webpa ## Output Filenames -We can use the `output.filename` [substitutions](/configuration/output#output-filename) setting to define the names of our output files. Webpack provides a method of templating the filenames using bracketed strings called **substitutions**. The `[contenthash]` substitution will add a unique hash based on the content of an asset. When the asset's content changes, `[contenthash]` will change as well. +We can use the `output.filename` [substitutions](/configuration/output#output-filename) setting to define the names of our output files. webpack provides a method of templating the filenames using bracketed strings called **substitutions**. The `[contenthash]` substitution will add a unique hash based on the content of an asset. When the asset's content changes, `[contenthash]` will change as well. Let's get our project set up using the example from [getting started](/guides/getting-started) with the `plugins` from [output management](/guides/output-management), so we don't have to deal with maintaining our `index.html` file manually: @@ -90,7 +90,7 @@ W> Output may differ depending on your current webpack version. Newer versions m ## Extracting Boilerplate -As we learned in [code splitting](/guides/code-splitting), the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) can be used to split modules out into separate bundles. Webpack provides an optimization feature to split runtime code into a separate chunk using the [`optimization.runtimeChunk`](/configuration/optimization/#optimization-runtimechunk) option. Set it to `single` to create a single runtime bundle for all chunks: +As we learned in [code splitting](/guides/code-splitting), the [`SplitChunksPlugin`](/plugins/split-chunks-plugin/) can be used to split modules out into separate bundles. webpack provides an optimization feature to split runtime code into a separate chunk using the [`optimization.runtimeChunk`](/configuration/optimization/#optimization-runtimechunk) option. Set it to `single` to create a single runtime bundle for all chunks: __webpack.config.js__ From bf2efc2b6c0991a926bbc378f7abd4d65601704f Mon Sep 17 00:00:00 2001 From: Rob Wierzbowski Date: Mon, 3 Dec 2018 09:05:49 -0500 Subject: [PATCH 3/4] Use webpack doc standard bold indicator --- src/content/guides/caching.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/caching.md b/src/content/guides/caching.md index 321e76621d3d..8de2e35d7591 100644 --- a/src/content/guides/caching.md +++ b/src/content/guides/caching.md @@ -24,7 +24,7 @@ This guide focuses on the configuration needed to ensure files produced by webpa ## Output Filenames -We can use the `output.filename` [substitutions](/configuration/output#output-filename) setting to define the names of our output files. webpack provides a method of templating the filenames using bracketed strings called **substitutions**. The `[contenthash]` substitution will add a unique hash based on the content of an asset. When the asset's content changes, `[contenthash]` will change as well. +We can use the `output.filename` [substitutions](/configuration/output#output-filename) setting to define the names of our output files. webpack provides a method of templating the filenames using bracketed strings called __substitutions__. The `[contenthash]` substitution will add a unique hash based on the content of an asset. When the asset's content changes, `[contenthash]` will change as well. Let's get our project set up using the example from [getting started](/guides/getting-started) with the `plugins` from [output management](/guides/output-management), so we don't have to deal with maintaining our `index.html` file manually: From abcde223817c7b840cdeb1253dbe10f50162cac0 Mon Sep 17 00:00:00 2001 From: Rob Wierzbowski Date: Mon, 3 Dec 2018 15:04:56 -0500 Subject: [PATCH 4/4] Remove "However" statement in caching page Weasel word, and the statement doesn't really give value. --- src/content/guides/caching.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/caching.md b/src/content/guides/caching.md index 8de2e35d7591..2eb0d7090381 100644 --- a/src/content/guides/caching.md +++ b/src/content/guides/caching.md @@ -338,4 +338,4 @@ We can see that both builds yielded `55e79e5927a639d21a1b` in the `vendor` bundl ## Conclusion -Caching can be complicated, but the benefits to our application's users make it worth it. Hopefully this guide has given you a good foundation for deploying consistent, cacheable assets. See the _Further Reading_ section below to learn more. +Caching can be complicated, but the benefit to application or site users makes it worth the effort. See the _Further Reading_ section below to learn more.