forked from webpack/webpack.js.org
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(concepts): added new targets section (webpack#71)
* docs(concepts): added new target section * Fixed webpack#14
- Loading branch information
1 parent
9411c24
commit c3562d4
Showing
2 changed files
with
83 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,82 @@ | ||
--- | ||
title: Targets | ||
--- | ||
> webworker | ||
> node | ||
> async-node | ||
> node-webkit | ||
> electron | ||
> electron-main | ||
> electron-renderer | ||
## Overview | ||
|
||
Because JavaScript can be written for both server and browser, webpack offers multiple deployment _targets_ that you can set in your webpack [configuration](./api/configuration). | ||
|
||
W> The webpack `target` property is not to be confused with the `output.libraryTarget` property. For more information see [our guide](./concepts/output) on the `output` property. | ||
|
||
|
||
### Usage | ||
|
||
To set the `target` property, you simply set the target value in your webpack config: | ||
|
||
|
||
**webpack.config.js** | ||
|
||
```javascript | ||
module.exports = config; | ||
|
||
config = { | ||
target: 'node' | ||
} | ||
``` | ||
|
||
### Options | ||
|
||
The following is a list of values you can pass to the `target` property. | ||
|
||
* `"web"` Compile for usage in a browser-like environment (default) | ||
* `"webworker"` Compile as WebWorker | ||
* `"node"` Compile for usage in a node.js-like environment (use `require` to load chunks) | ||
* `"async-node"` Compile for usage in a node.js-like environment (use `fs` and `vm` to load chunks async) | ||
* `"node-webkit"` Compile for usage in webkit, uses jsonp chunk loading but also supports build in node.js modules plus require("nw.gui") (experimental) | ||
* `"electron-main"` Compile for electron renderer process, provide a target using `JsonpTemplatePlugin`, `FunctionModulePlugin` for browser environment and `NodeTargetPlugin` and `ExternalsPlugin` for commonjs and electron bulit-in modules. *Note: need `webpack` >= 1.12.15. | ||
|
||
Each _target_ has a variety of deployment/environment specific additions, support to fit its needs. | ||
|
||
For example, when you use the `electron-main` _target_, *webpack* includes multiple `electron-main` specific variables. For more information on which templates and _externals_ are used, you can refer [directly to the webpack source code](https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L70-L185). | ||
|
||
?> We should expand on this further. What specifically is included. | ||
|
||
### Multiple Targets | ||
|
||
Although webpack does **not** support multiple strings being passed into the `target` property, you can create an isomorphic library by bundling two separate configurations: | ||
|
||
**webpack.config.js** | ||
```javascriptis | ||
module.exports = [ serverConfig, clientConfig ]; | ||
var serverConfig = { | ||
target: 'node', | ||
output: { | ||
path: 'dist', | ||
filename: 'lib.node.js' | ||
} | ||
//... | ||
} | ||
var clientConfig = { | ||
target: 'web' // <=== can be omitted as default is 'web' | ||
output: { | ||
path: 'dist' | ||
filename: 'lib.js' | ||
} | ||
//... | ||
} | ||
``` | ||
|
||
The example above will create a `lib.js` and `lib.node.js` file in your `dist` folder. | ||
|
||
### Resources | ||
|
||
As seen from the options above there are multiple different deployment _targets_ that you can choose from. Below is a list of examples, and resources that you can refer to. | ||
|
||
#### Bundle Output Comparison: | ||
**[compare-webpack-target-bundles](https://github.com/TheLarkInn/compare-webpack-target-bundles)**: A great resource for testing and viewing different webpack _targets_. Also great for bug reporting. | ||
|
||
?> Need to find up to date examples of these webpack targets being used in live code or boilerplates. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters