From 6d8375242e78159d72ac9ca29f5a3c93b6bb9b39 Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Tue, 6 Mar 2018 15:25:21 +0200 Subject: [PATCH 1/3] docs(concepts) Update concepts and explain mode option --- src/content/concepts/index.md | 28 +++++++++++------ src/content/concepts/mode.md | 58 +++++++++++++++++++++++++++++++++++ 2 files changed, 77 insertions(+), 9 deletions(-) create mode 100644 src/content/concepts/mode.md diff --git a/src/content/concepts/index.md b/src/content/concepts/index.md index 9e9283ca3428..70f1a7b672fb 100644 --- a/src/content/concepts/index.md +++ b/src/content/concepts/index.md @@ -9,13 +9,14 @@ contributors: - jimrfenner - TheDutchCoder - adambraimbridge + - EugeneHlushko --- At its core, *webpack* is a _static module bundler_ for modern JavaScript applications. When webpack processes your application, it recursively builds a _dependency graph_ that includes every module your application needs, then packages all of those modules into one or more _bundles_. T> Learn more about JavaScript modules and webpack modules [here](/concepts/modules). -It is [incredibly configurable](/configuration), but to get started you only need to understand four **Core Concepts**: +Since v4.0.0 webpack does not require a configuration file. Nevertheless, it is [incredibly configurable](/configuration). To get started you only need to understand four **Core Concepts**: - Entry - Output @@ -33,6 +34,8 @@ Every dependency is then processed and outputted into files called *bundles*, wh You can specify an entry point (or multiple entry points) by configuring the `entry` property in the [webpack configuration](/configuration). +T> `entry` defaults to `./src` + Here's the simplest example of an `entry` configuration: __webpack.config.js__ @@ -50,6 +53,8 @@ T> You can configure the `entry` property in various ways depending the needs of The **output** property tells webpack where to emit the *bundles* it creates and how to name these files. You can configure this part of the process by specifying an `output` field in your configuration: +T> `output.path` defaults to `./dist` + __webpack.config.js__ ```javascript @@ -90,9 +95,7 @@ __webpack.config.js__ const path = require('path'); const config = { - entry: './path/to/my/entry/file.js', output: { - path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' }, module: { @@ -127,14 +130,8 @@ In order to use a plugin, you need to `require()` it and add it to the `plugins` ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm const webpack = require('webpack'); //to access built-in plugins -const path = require('path'); const config = { - entry: './path/to/my/entry/file.js', - output: { - path: path.resolve(__dirname, 'dist'), - filename: 'my-first-webpack.bundle.js' - }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } @@ -154,3 +151,16 @@ There are many plugins that webpack provides out of the box! Check out our [list Using plugins in your webpack config is straightforward - however, there are many use cases that are worth further exploration. [Learn more!](/concepts/plugins) + + +## Mode + +By choosing between `development` and `production` **mode** you can enable webpack's automatic optimizations according to selected option. + +```javascript +module.exports = { + mode: 'production' +}; +``` + +[Learn more!](/concepts/mode) \ No newline at end of file diff --git a/src/content/concepts/mode.md b/src/content/concepts/mode.md new file mode 100644 index 000000000000..9f24a035314c --- /dev/null +++ b/src/content/concepts/mode.md @@ -0,0 +1,58 @@ +--- +title: Mode +sort: 4 +contributors: + - EugeneHlushko +--- + +Providing the `mode` configuration option tells webpack to use its built-in optimizations accordingly. + +`string` (development | production) + + +## Usage + +Just provide the `mode` option in the config: + +```javascript +module.exports = { + mode: 'production' +}; +``` + +or pass it as a cli argument: + +```bash +webpack --mode=production +``` + + +## Mode: development + + +```diff +// webpack.production.config.js +module.exports = { ++ mode: 'development' +- plugins: [ +- new webpack.NamedModulesPlugin(), +- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }), +- ] +} +``` + +## Mode: production + + +```diff +// webpack.production.config.js +module.exports = { ++ mode: 'production', +- plugins: [ +- new UglifyJsPlugin(/* ... */), +- new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }), +- new webpack.optimize.ModuleConcatenationPlugin(), +- new webpack.NoEmitOnErrorsPlugin() +- ] +} +``` From 9d3891264655431e92e84831fc4de7529d7c5cd7 Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Tue, 6 Mar 2018 15:37:56 +0200 Subject: [PATCH 2/3] docs(mode) provide available options table --- src/content/concepts/mode.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/content/concepts/mode.md b/src/content/concepts/mode.md index 9f24a035314c..b812828a29e3 100644 --- a/src/content/concepts/mode.md +++ b/src/content/concepts/mode.md @@ -7,8 +7,7 @@ contributors: Providing the `mode` configuration option tells webpack to use its built-in optimizations accordingly. -`string` (development | production) - +`string` ## Usage @@ -19,6 +18,7 @@ module.exports = { mode: 'production' }; ``` + or pass it as a cli argument: @@ -26,8 +26,15 @@ or pass it as a cli argument: webpack --mode=production ``` +The following string values are supported: + +Option | Description +--------------------- | ----------------------- +`development` | Provides `process.env.NODE_ENV` with value `development`. Enables `NamedModulesPlugin`. +`production` | Provides `process.env.NODE_ENV` with value `production`. Enables `UglifyJsPlugin`, `ModuleConcatenationPlugin` and `NoEmitOnErrorsPlugin`. -## Mode: development + +### Mode: development ```diff @@ -41,7 +48,8 @@ module.exports = { } ``` -## Mode: production + +### Mode: production ```diff From abe8499895b13c1d6ac0c1e069fca8deac1376f1 Mon Sep 17 00:00:00 2001 From: EugeneHlushko Date: Tue, 6 Mar 2018 20:55:51 +0200 Subject: [PATCH 3/3] docs(concepts) move default values information to intro --- src/content/concepts/index.md | 10 +++------- src/content/guides/getting-started.md | 1 + 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/content/concepts/index.md b/src/content/concepts/index.md index 70f1a7b672fb..0e700368e109 100644 --- a/src/content/concepts/index.md +++ b/src/content/concepts/index.md @@ -32,9 +32,7 @@ An **entry point** indicates which module webpack should use to begin building o Every dependency is then processed and outputted into files called *bundles*, which we'll discuss more in the next section. -You can specify an entry point (or multiple entry points) by configuring the `entry` property in the [webpack configuration](/configuration). - -T> `entry` defaults to `./src` +You can specify an entry point (or multiple entry points) by configuring the `entry` property in the [webpack configuration](/configuration). It defaults to `./src`. Here's the simplest example of an `entry` configuration: @@ -51,9 +49,7 @@ T> You can configure the `entry` property in various ways depending the needs of ## Output -The **output** property tells webpack where to emit the *bundles* it creates and how to name these files. You can configure this part of the process by specifying an `output` field in your configuration: - -T> `output.path` defaults to `./dist` +The **output** property tells webpack where to emit the *bundles* it creates and how to name these files and defaults to `./dist`. You can configure this part of the process by specifying an `output` field in your configuration: __webpack.config.js__ @@ -155,7 +151,7 @@ Using plugins in your webpack config is straightforward - however, there are man ## Mode -By choosing between `development` and `production` **mode** you can enable webpack's automatic optimizations according to selected option. +By setting the `mode` parameter to either `development` or `production`, you can enable webpack's built-in optimizations that correspond with the selected mode. ```javascript module.exports = { diff --git a/src/content/guides/getting-started.md b/src/content/guides/getting-started.md index dc36f4dd2ae4..5c6ecb11d0c1 100644 --- a/src/content/guides/getting-started.md +++ b/src/content/guides/getting-started.md @@ -77,6 +77,7 @@ We also need to adjust our `package.json` file in order to make sure we mark our T> If you want to learn more about the inner workings of `package.json`, then we recommend reading the [npm documentation](https://docs.npmjs.com/files/package.json). __package.json__ + ``` diff { "name": "webpack-demo",