Merge pull request #311 from webpack/feature/es6

prefer es6 import over require

Author: sokra

content/api/node.md

@@ -20,7 +20,7 @@ Then require the webpack module in your Node.js script:
 ``` js
 const webpack = require("webpack");
 
-// Or if you prefer ES6:
+// Or if you prefer ES2015:
 import webpack from "webpack";
 ```
 

content/concepts/module-resolution.md

@@ -8,9 +8,9 @@ A resolver is a library which helps find the absolute path of a module.
 A module can be required as a dependency from another module as
 
 ```js
-require('/path/to/module')
-//or
-import mymodule from '/path/to/module'
+import mymodule from 'path/to/module'
+// or
+require('path/to/module')
 ```
 
 The dependency module can be from the application code or a third party library. The resolver helps
@@ -21,29 +21,29 @@ The dependency module can be from the application code or a third party library.
 
 `webpack` resolves three kinds of file paths
 
-* Absolute paths
+### Absolute paths
 
 ```js
-require("/home/me/file");
-require("C:\\Home\\me\\file");
+import "/home/me/file";
+import "C:\\Users\\me\\file";
 ```
 
 Since we already have the absolute path to the file, no further resolution is required.
 
-* Relative paths
+### Relative paths
 
 ```js
-require("../src/file");
-require("./file");
+import "../src/file";
+import "./file";
 ```
 
 In this case, the directory of the resource file is taken to be the context directory (the directory of the currently processed file). The given relative path is joined to the context path to produce the absolute path to the file.
 
-* Module path
+### Module path
 
 ```js
-require("module");
-require("module/lib/file");
+import "module";
+import "module/lib/file";
 ```
 
 Modules are searched for inside directories which are specified using `resolve.modules`, which is can be an array comprising of different paths.

content/concepts/modules.md

@@ -18,8 +18,8 @@ webpack builds on lessons learned from these systems and applies the concept of
 
 In contrast to Node.js modules, webpack _modules_ can express their _dependencies_ in a variety of ways. A few examples are:
 
+* An ES2015 `import` statement
 * A JavaScript `require()` statement
-* An ECMAScript2015 `import` statement
 * An AMD `define` and `require` statement
 * An `@import` statement inside of a css/sass/less file.
 * An image url in a stylesheet (`url(...)`) or html (`<img src=...>`) file.

content/configuration/index.md

@@ -50,8 +50,8 @@ T> Notice that throughout the configuration we use Node's built-in [path module]
     // the name of the exported library
 
     <details><summary>[libraryTarget](/configuration/output#output-librarytarget): "umd", // enum</summary>
-    [libraryTarget](/configuration/output#output-librarytarget): "umd-module", // ES6 module wrapped in UMD
-    [libraryTarget](/configuration/output#output-librarytarget): "commonjs-module", // ES6 module wrapped in CommonJs
+    [libraryTarget](/configuration/output#output-librarytarget): "umd-module", // ES2015 module wrapped in UMD
+    [libraryTarget](/configuration/output#output-librarytarget): "commonjs-module", // ES2015 module wrapped in CommonJs
     [libraryTarget](/configuration/output#output-librarytarget): "commonjs2", // exported with module.exports
     [libraryTarget](/configuration/output#output-librarytarget): "commonjs", // exported as properties to exports
     [libraryTarget](/configuration/output#output-librarytarget): "amd", // defined with AMD defined method

content/configuration/output.md

@@ -225,7 +225,7 @@ Configure how the library will be exposed. Any one of the following options can
 
 `libraryTarget: "commonjs2"` - Expose it using the `module.exports` object (`output.library` is ignored)
 
-`libraryTarget: "commonjs-module"` - Expose it using the `module.exports` object (`output.library` is ignored), `__esModule` is defined (it's threaded as ES6 Module in interop mode)
+`libraryTarget: "commonjs-module"` - Expose it using the `module.exports` object (`output.library` is ignored), `__esModule` is defined (it's threaded as ES2015 Module in interop mode)
 
 `libraryTarget: "this"` - Expose it as a property of `this` (i.e. `this["MyLibrary"] = ...`)
 

content/configuration/resolve.md

@@ -14,7 +14,7 @@ Have a look at [Module Resolution](/concepts/module-resolution) for more explana
 
 `object`
 
-Configure how modules are resolved. For example, when calling `import "lodash"` in ES6, the `resolve` options can change where webpack goes to look for `"lodash"` (see [`modules`](#resolve-modules)).
+Configure how modules are resolved. For example, when calling `import "lodash"` in ES2015, the `resolve` options can change where webpack goes to look for `"lodash"` (see [`modules`](#resolve-modules)).
 
 ## `resolve.alias`
 
@@ -56,7 +56,7 @@ import Test1 from 'xyz'; // Success, file.js is resolved and imported
 import Test2 from 'xyz/file.js'; // Error, /path/to/file.js/file.js is invalid
 ```
 
-| `alias:` | `require("xyz")` | `require("xyz/file.js")` |
+| `alias:` | `import "xyz"` | `import "xyz/file.js"` |
 | -------- | ---------------- | -------------------------|
 | `{}` | `/abc/node_modules/xyz/index.js` | `/abc/node_modules/xyz/file.js` |
 | `{ xyz: "/abs/path/to/file.js" }` | `/abs/path/to/file.js` | error |

content/get-started/why-webpack.md

@@ -55,7 +55,7 @@ webpack however is not the only module bundler out there. If you are choosing be
 | Preprocessing | **loaders, [transforms](https://github.com/webpack/transform-loader)** | loaders | transforms | plugin translate | plugin transforms | compilers, optimizers |
 | Replacement for browser | `web_modules`, `.web.js`, package.json field, alias config option | alias option | package.json field, alias option | package.json, alias option | no |
 | Requirable files | file system | **web** | file system | through plugins | file system or through plugins | file system |
-| Runtime overhead | **243B + 20B per module + 4B per dependency** | 14.7kB + 0B per module + (3B + X) per dependency | 415B + 25B per module + (6B + 2X) per dependency | 5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES6 System.register before gzip | **none for ES2015 modules** (other formats may have)
+| Runtime overhead | **243B + 20B per module + 4B per dependency** | 14.7kB + 0B per module + (3B + X) per dependency | 415B + 25B per module + (6B + 2X) per dependency | 5.5kB for self-executing bundles, 38kB for full loader and polyfill, 0 plain modules, 293B CJS, 139B ES2015 System.register before gzip | **none for ES2015 modules** (other formats may have)
 | Watch mode | yes | not required | yes | not needed in dev | no | yes |
 
 ♦ in production mode (opposite in development mode)

content/how-to/upgrade-from-webpack-1.md

@@ -166,7 +166,7 @@ plugins: [
 
 A dependency with only an expression (i. e. `require(expr)`) will now create an empty context instead of an context of the complete directory.
 
-Best refactor this code as it won't work with ES6 Modules. If this is not possible you can use the `ContextReplacementPlugin` to hint the compiler to the correct resolving.
+Best refactor this code as it won't work with ES2015 Modules. If this is not possible you can use the `ContextReplacementPlugin` to hint the compiler to the correct resolving.
 
 ?> Link to an article about dynamic dependencies.
 
@@ -235,7 +235,7 @@ To keep compatibility with old loaders, loaders can be switched to debug mode vi
   ]
 ```
 
-### Code Splitting with ES6
+### Code Splitting with ES2015
 
 In webpack v1, you could use `require.ensure` as a method to lazily-load chunks for your application:
 
@@ -245,7 +245,7 @@ require.ensure([], function(require) {
 });
 ```
 
-The ES6 Loader spec defines `System.import` as method to load ES6 Modules dynamically on runtime.
+The ES2015 Loader spec defines `System.import` as method to load ES2015 Modules dynamically on runtime.
 
 webpack treats `System.import` as a split-point and puts the requested module in a separate chunk.
 
@@ -285,12 +285,12 @@ function route(path, query) {
 // This creates a separate chunk for each possible route
 ```
 
-### Mixing ES6 with AMD and CommonJS
+### Mixing ES2015 with AMD and CommonJS
 
 As for AMD and CommonJS you can freely mix all three module types (even within the same file). Webpack behaves similar to babel in this case:
 
 ```javascript
-// CommonJS consuming ES6 Module
+// CommonJS consuming ES2015 Module
 var book = require("./book");
 
 book.currentPage;
@@ -299,7 +299,7 @@ book.default === "This is a book";
 ```
 
 ```javascript
-// ES6 Module consuming CommonJS
+// ES2015 Module consuming CommonJS
 import fs from "fs"; // module.exports map to default
 import { readFileSync } from "fs"; // named exports are read from returned object+
 

content/index.md

@@ -1,20 +1,18 @@
 ## Write your code.
 
-**index.js**
+**app.js**
 
 ```js
-const foo = require('./foo.js')
+import bar from './foo';
 
-foo.bar()
+bar():
 ```
 
 **foo.js**
 
 ```js
-module.exports = {
-  bar: function () {
-    //
-  }
+export function bar() {
+  //
 }
 ```
 
@@ -24,9 +22,9 @@ module.exports = {
 
 ```js
 module.exports = {
-  entry: './index.js',
+  entry: './app.js',
   output: {
-    path: 'bundle.js'
+    filename: 'bundle.js'
   }
 }
 ```
@@ -40,7 +38,7 @@ module.exports = {
   </head>
   <body>
     ...
-    <script src="/bundle.js"></script>
+    <script src="bundle.js"></script>
   </body>
 </html>
 ```