Merge pull request #690 from rouzbeh84/concepts-tweaking

Concepts tweaking

Author: bebraw

.gitignore

@@ -3,4 +3,3 @@ npm-debug.log
 build
 generated
 .antwar
-

content/concepts/configuration.md

@@ -158,7 +158,7 @@ In the example below JSX (React JavaScript Markup) and Babel are used to create
 ```javascript
 import h from 'jsxobj';
 
-// example of an import'd plugin
+// example of an imported plugin
 const CustomPlugin = config => ({
   ...config,
   name: 'custom-plugin'

content/concepts/hot-module-replacement.md

@@ -47,7 +47,7 @@ store them in a JSON file.
 ### From The Module View
 
 HMR is an opt-in feature that only affects modules containing HMR code. One example
-would be patching styling through the [style-loder](https://github.com/webpack/style-loader).
+would be patching styling through the [style-loader](https://github.com/webpack/style-loader).
 In order for patching to work, style-loader implements the HMR interface; when it
 receives an update through HMR, it replaces the old styles with the new ones.
 
@@ -88,8 +88,9 @@ You can use it in development as a LiveReload replacement.
 hot mode in which it tries to update with HMR before trying to reload the whole page. See how
 to implement [HMR with React](/guides/hmr-react) as an example.
 
-Some loaders already generate modules that are hot-updateable. For example, the `style-loader`
+
+Some loaders already generate modules that are hot-updatable. For example, the `style-loader`
 can swap out a page's stylesheets. For modules like this, you don't need to do anything special.
 
 webpack's power lies in its customizability, and there are *many* ways of configuring HMR
-depending on the needs of a particular project.
+depending on the needs of a particular project.

content/concepts/modules.md

@@ -40,6 +40,6 @@ The webpack community has built _loaders_ for a wide variety of popular language
 * [Less](http://lesscss.org)
 * [Stylus](http://stylus-lang.com)
 
-And many others! Overall, webpack provides a powerful and rich API for customization that allows one to use webpack for **any stack**, while staying **unopinionated** about your development, testing, and production workflows.
+And many others! Overall, webpack provides a powerful and rich API for customization that allows one to use webpack for **any stack**, while staying **non-opinionated** about your development, testing, and production workflows.
 
 For a full list, see [**the list of loaders**](/loaders) or [**write your own**](/api/loaders).

content/concepts/output.md

@@ -2,34 +2,39 @@
 title: Output
 sort: 3
 contributors:
-- TheLarkInn
+  - TheLarkInn
 ---
 
 Options affecting the output of the compilation. `output` options tell Webpack how to write the compiled files to disk. Note, that while there can be multiple `entry` points, only one `output` configuration is specified.
 
 If you use any hashing (`[hash]` or `[chunkhash]`), make sure to have a consistent ordering of modules. Use the `OccurrenceOrderPlugin` or `recordsPath`.
 
-## Usage
+# Usage
 
-To set the `output` property, you simply set the output value in your webpack config:
+The minimum requirements for the `output` property in your webpack config is to set its value to an object including the following two things :
+
+Your preferred `filename` of the compiled file: `// main.js || bundle.js || index.js`
+
+An [`output.path`](#output-path) as an **absolute path** for what directory you prefer it to go in once bundled.
 
 **webpack.config.js**
 
 ```javascript
 const config = {
   output: {
-    filename: 'bundle.js'
+    filename: 'bundle.js',
+    output: '/home/proj/public/assets'
   }
 };
 
 module.exports = config;
 ```
 
-## Options
+# Options
 
 The following is a list of values you can pass to the `output` property.
 
-### `output.chunkFilename`
+## `output.chunkFilename`
 
 The filename of non-entry chunks as a relative path inside the `output.path` directory.
 
@@ -41,7 +46,7 @@ The filename of non-entry chunks as a relative path inside the `output.path` dir
 
 `[chunkhash]` is replaced by the hash of the chunk.
 
-### `output.crossOriginLoading`
+## `output.crossOriginLoading`
 
 This option enables cross-origin loading of chunks.
 
@@ -57,10 +62,9 @@ For more information on cross-origin loading see [MDN](https://developer.mozilla
 
 > Default: `false`
 
-> see also [[library and externals]]
-> see also [[Development Tools]]
+> see also [[library and externals]] see also [[Development Tools]]
 
-### `output.devtoolLineToLine`
+## `output.devtoolLineToLine`
 
 Enable line-to-line mapped mode for all/specified modules. Line-to-line mapped mode uses a simple SourceMap where each line of the generated source is mapped to the same line of the original source. It's a performance optimization. Only use it if your performance needs to be better and you are sure that input lines match which generated lines.
 
@@ -70,12 +74,13 @@ An object `{test, include, exclude}` similar to `module.loaders` enables it for
 
 > Default: `false`
 
-### `output.filename`
+## `output.filename`
 
 Specifies the name of each output file on disk. You must **not** specify an absolute path here! The `output.path` option determines the location on disk the files are written. `filename` is used solely for naming the individual files.
 
 **single entry**
-``` javascript
+
+```javascript
 {
   entry: './src/app.js',
   output: {
@@ -97,7 +102,7 @@ If your configuration creates more than a single "chunk" (as with multiple entry
 
 `[chunkhash]` is replaced by the hash of the chunk.
 
-``` javascript
+```javascript
 {
   entry: {
     app: './src/app.js',
@@ -112,7 +117,7 @@ If your configuration creates more than a single "chunk" (as with multiple entry
 // writes to disk: ./build/app.js, ./build/search.js
 ```
 
-### `output.hotUpdateChunkFilename`
+## `output.hotUpdateChunkFilename`
 
 The filename of the Hot Update Chunks. They are inside the `output.path` directory.
 
@@ -122,35 +127,35 @@ The filename of the Hot Update Chunks. They are inside the `output.path` directo
 
 > Default: `"[id].[hash].hot-update.js"`
 
-### `output.hotUpdateFunction`
+## `output.hotUpdateFunction`
 
 The JSONP function used by webpack for async loading of hot update chunks.
 
 > Default: `"webpackHotUpdate"`
 
-### `output.hotUpdateMainFilename`
+## `output.hotUpdateMainFilename`
 
 The filename of the Hot Update Main File. It is inside the `output.path` directory.
 
 `[hash]` is replaced by the hash of the compilation. (The last hash stored in the records)
 
 > Default: `"[hash].hot-update.json"`
 
-### `output.jsonpFunction`
+## `output.jsonpFunction`
 
 The JSONP function used by webpack for asnyc loading of chunks.
 
-A shorter function may reduce the filesize a bit. Use a different identifier when having multiple webpack instances on a single page.
+A shorter function may reduce the file size a bit. Use a different identifier when having multiple webpack instances on a single page.
 
 > Default: `"webpackJsonp"`
 
-### `output.library`
+## `output.library`
 
 If set, export the bundle as library. `output.library` is the name.
 
 Use this if you are writing a library and want to publish it as single file.
 
-### `output.libraryTarget`
+## `output.libraryTarget`
 
 Which format to export the library:
 
@@ -170,48 +175,49 @@ Which format to export the library:
 
 If `output.library` is not set, but `output.libraryTarget` is set to a value other than `var`, every property of the exported object is copied (Except `amd`, `commonjs2` and `umd`).
 
-### `output.path`
+## `output.path`
 
 The output directory as an **absolute path** (required).
 
 `[hash]` is replaced by the hash of the compilation.
 
-
 **config.js**
 
-``` javascript
+```javascript
 output: {
-	path: "/home/proj/public/assets",
-	publicPath: "/assets/"
+    path: "/home/proj/public/assets",
+    publicPath: "/assets/"
 }
 ```
 
 **index.html**
-``` html
+
+```html
 <head>
   <link href="/assets/spinner.gif"/>
 </head>
 ```
+
 And a more complicated example of using a CDN and hashes for assets.
 
 **config.js**
 
-``` javascript
+```javascript
 output: {
-	path: "/home/proj/cdn/assets/[hash]",
-	publicPath: "http://cdn.example.com/assets/[hash]/"
+    path: "/home/proj/cdn/assets/[hash]",
+    publicPath: "http://cdn.example.com/assets/[hash]/"
 }
 ```
 
 **Note:** In cases when the eventual `publicPath` of output files isn't known at compile time, it can be left blank and set dynamically at runtime in the entry point file. If you don't know the `publicPath` while compiling, you can omit it and set `__webpack_public_path__` on your entry point.
 
-``` javascript
+```javascript
  __webpack_public_path__ = myRuntimePublicPath
 
 // rest of your application entry
 ```
 
-### `output.sourceMapFilename`
+## `output.sourceMapFilename`
 
 The filename of the SourceMaps for the JavaScript files. They are inside the `output.path` directory.
 

content/concepts/plugins.md

@@ -12,7 +12,7 @@ They also serve the purpose of doing **anything else** that a [loader](/concepts
 
 ## Anatomy
 
-A webpack **plugin** is a JavaScript object that has an `apply` property. This `apply` property is called by the webpack compiler, giving access to the **entire** compilation lifecycle.
+A webpack **plugin** is a JavaScript object that has an [`apply`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) property. This `apply` property is called by the webpack compiler, giving access to the **entire** compilation lifecycle.
 
 **ConsoleLogOnBuildWebpackPlugin.js**
 

content/concepts/targets.md

@@ -21,9 +21,11 @@ module.exports = {
 };
 ```
 
+In the example above, using `node` webpack will compile for usage in a Node.js-like environment (uses Node.js `require` to load chunks and not touch any built in modules like `fs` or `path`).
+
 Each _target_ has a variety of deployment/environment specific additions, support to fit its needs. See what [targets are available](/configuration/target).
 
-?> We should expand on this further. What specifically is included.
+?>Further expansion for other popular target values
 
 ## Multiple Targets