diff --git a/src/content/concepts/index.md b/src/content/concepts/index.md index 9e9283ca3428..0e700368e109 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 @@ -31,7 +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). +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: @@ -48,7 +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: +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__ @@ -90,9 +91,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 +126,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 +147,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 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 = { + 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..b812828a29e3 --- /dev/null +++ b/src/content/concepts/mode.md @@ -0,0 +1,66 @@ +--- +title: Mode +sort: 4 +contributors: + - EugeneHlushko +--- + +Providing the `mode` configuration option tells webpack to use its built-in optimizations accordingly. + +`string` + +## 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 +``` + +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 + + +```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() +- ] +} +``` 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",