From 48a35001c3833c43be198f2bcdb0a2f05c487292 Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Tue, 28 Aug 2018 11:17:05 +0300 Subject: [PATCH 1/3] docs(concepts) use common formatting, provide more links, mention mode in core of the concepts --- src/content/concepts/index.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/content/concepts/index.md b/src/content/concepts/index.md index d3cf10af141a..2bce2364a5ab 100644 --- a/src/content/concepts/index.md +++ b/src/content/concepts/index.md @@ -16,20 +16,21 @@ contributors: - yairhaimo --- -At its core, **webpack** is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a _dependency graph_ which maps every module your project needs and generates one or more _bundles_. +At its core, __webpack__ is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a [dependency graph](/concepts/dependency-graph/) which maps every module your project needs and generates one or more _bundles_. T> Learn more about JavaScript modules and webpack modules [here](/concepts/modules). -Since version 4.0.0, **webpack does not require a configuration file** to bundle your project, nevertheless it is [incredibly configurable](/configuration) to better fit your needs. +Since version 4.0.0, __webpack does not require a configuration file__ to bundle your project, nevertheless it is [incredibly configurable](/configuration) to better fit your needs. -To get started you only need to understand its **Core Concepts**: +To get started you only need to understand its __Core Concepts__: - Entry - Output - Loaders - Plugins +- Mode -This document is intended to give a **high-level** overview of these concepts, while providing links to detailed concept specific use cases. +This document is intended to give a __high-level__ overview of these concepts, while providing links to detailed concept specific use cases. For a better understanding of the ideas behind module bundlers and how they work under the hood consult these resources: @@ -40,9 +41,9 @@ For a better understanding of the ideas behind module bundlers and how they work ## Entry -An **entry point** indicates which module webpack should use to begin building out its internal *dependency graph*. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly). +An __entry point__ indicates which module webpack should use to begin building out its internal [dependency graph](/concepts/dependency-graph/). webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly). -By default its value is `./src/index.js`, but you can specify a different (or multiple entry points) by configuring the **entry** property in the [webpack configuration](/configuration). For example: +By default its value is `./src/index.js`, but you can specify a different (or multiple entry points) by configuring the __entry__ property in the [webpack configuration](/configuration). For example: __webpack.config.js__ @@ -57,7 +58,7 @@ T> Learn more in the [entry points](/concepts/entry-points) section. ## Output -The **output** property tells webpack where to emit the *bundles* it creates and how to name these files. It defaults to `./dist/main.js` for the main output file and to the `./dist` folder for any other generated file. +The __output__ property tells webpack where to emit the *bundles* it creates and how to name these files. It defaults to `./dist/main.js` for the main output file and to the `./dist` folder for any other generated file. You can configure this part of the process by specifying an `output` field in your configuration: @@ -82,11 +83,11 @@ T> The `output` property has [many more configurable features](/configuration/ou ## Loaders -Out of the box, webpack only understands JavaScript files. **Loaders** allow webpack to process other types of files and convert them into valid [modules](/concepts/modules) that can be consumed by your application and added to the dependency graph. +Out of the box, webpack only understands JavaScript files. __Loaders__ allow webpack to process other types of files and convert them into valid [modules](/concepts/modules) that can be consumed by your application and added to the dependency graph. W> Note that the ability to `import` any type of module, e.g. `.css` files, is a feature specific to webpack and may not be supported by other bundlers or task runners. We feel this extension of the language is warranted as it allows developers to build a more accurate dependency graph. -At a high level, **loaders** have two properties in your webpack configuration: +At a high level, __loaders__ have two properties in your webpack configuration: 1. The `test` property identifies which file or files should be transformed. 2. The `use` property indicates which loader should be used to do the transforming. @@ -110,7 +111,7 @@ module.exports = { The configuration above has defined a `rules` property for a single module with two required properties: `test` and `use`. This tells webpack's compiler the following: -> "Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a `require()`/`import` statement, **use** the `raw-loader` to transform it before you add it to the bundle." +> "Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a `require()`/`import` statement, __use__ the `raw-loader` to transform it before you add it to the bundle." W> It is important to remember that when defining rules in your webpack config, you are defining them under `module.rules` and not `rules`. For your benefit, webpack will warn you if this is done incorrectly. @@ -125,7 +126,7 @@ T> Check out the [plugin interface](/api/plugins) and how to use it to extend we In order to use a plugin, you need to `require()` it and add it to the `plugins` array. Most plugins are customizable through options. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with the `new` operator. -**webpack.config.js** +__webpack.config.js__ ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm From 73d2f7928cb8d654636b42f03b8efd37cdd03a1f Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Tue, 28 Aug 2018 11:20:46 +0300 Subject: [PATCH 2/3] docs(concepts) duplicate links on the list for better ux --- src/content/concepts/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/concepts/index.md b/src/content/concepts/index.md index 2bce2364a5ab..8edad9aae45c 100644 --- a/src/content/concepts/index.md +++ b/src/content/concepts/index.md @@ -24,11 +24,11 @@ Since version 4.0.0, __webpack does not require a configuration file__ to bundle To get started you only need to understand its __Core Concepts__: -- Entry -- Output -- Loaders -- Plugins -- Mode +- [Entry](#entry) +- [Output](#output) +- [Loaders](#loaders) +- [Plugins](#plugins) +- [Mode](#mode) This document is intended to give a __high-level__ overview of these concepts, while providing links to detailed concept specific use cases. From 635ebabb1e93d343fc5348fd601a6ea5d0b2ba30 Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Tue, 11 Sep 2018 10:38:52 +0300 Subject: [PATCH 3/3] docs(concepts) forgot to add EugeneHlushko to contributors --- src/content/concepts/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/concepts/index.md b/src/content/concepts/index.md index 8edad9aae45c..7ae708e55876 100644 --- a/src/content/concepts/index.md +++ b/src/content/concepts/index.md @@ -14,6 +14,7 @@ contributors: - arjunsajeev - byzyk - yairhaimo + - EugeneHlushko --- At its core, __webpack__ is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it internally builds a [dependency graph](/concepts/dependency-graph/) which maps every module your project needs and generates one or more _bundles_.