Merge pull request #279 from webpack/loader-extension

Add `-loader` to every loader name

Author: bebraw

antwar.config.js

@@ -31,7 +31,7 @@ module.exports = {
     '/': root(
       function() {
         return require.context(
-          'json!yaml-frontmatter!./content',
+          'json-loader!yaml-frontmatter-loader!./content',
           false,
           /^\.\/.*\.md$/
         );
@@ -41,7 +41,7 @@ module.exports = {
       'Concepts',
       function() {
         return require.context(
-          'json!yaml-frontmatter!./content/concepts',
+          'json-loader!yaml-frontmatter-loader!./content/concepts',
           false,
           /^\.\/.*\.md$/
         );
@@ -51,7 +51,7 @@ module.exports = {
       'Configuration',
       function() {
         return require.context(
-          'json!yaml-frontmatter!./content/configuration',
+          'json-loader!yaml-frontmatter-loader!./content/configuration',
           false,
           /^\.\/.*\.md$/
         );
@@ -61,7 +61,7 @@ module.exports = {
       'How to',
       function() {
         return require.context(
-          'json!yaml-frontmatter!./content/how-to',
+          'json-loader!yaml-frontmatter-loader!./content/how-to',
           true,
           /^\.\/.*\.md$/
         );
@@ -71,7 +71,7 @@ module.exports = {
       'API',
       function() {
         return require.context(
-          'json!yaml-frontmatter!./content/api',
+          'json-loader!yaml-frontmatter-loader!./content/api',
           false,
           /^\.\/.*\.md$/
         );
@@ -81,7 +81,7 @@ module.exports = {
       'Loaders',
       function() {
         return require.context(
-          'json!yaml-frontmatter!./generated/loaders',
+          'json-loader!yaml-frontmatter-loader!./generated/loaders',
           false,
           /^\.\/.*\.md$/
         );
@@ -91,7 +91,7 @@ module.exports = {
       'Plugins',
       function() {
         return require.context(
-          'json!yaml-frontmatter!./generated/plugins',
+          'json-loader!yaml-frontmatter-loader!./generated/plugins',
           false,
           /^\.\/.*\.md$/
         );

content/concepts/index.md

@@ -2,6 +2,7 @@
 title: Introduction
 contributors:
   - TheLarkInn
+  - jhnns
 ---
 
 *webpack* is a _module bundler_ for modern JavaScript applications. It is [incredibly configurable](/configuration), however, there are **4 Core Concepts** we feel you should understand before you get started!

content/concepts/plugins.md

@@ -3,6 +3,7 @@ title: Plugins
 sort: 3
 contributors:
   - TheLarkInn
+  - jhnns
 ---
 
 **Plugins** are the [backbone](https://github.com/webpack/tapable) of webpack. webpack itself is built on the **same plugin system** that you use in your webpack configuration!!

content/how-to/hot-module-reload.md

@@ -2,6 +2,7 @@
 title: How to Configure Hot Module Replacement?
 contributors:
   - jmreidy
+  - jhnns
 ---
 
 Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
@@ -116,14 +117,14 @@ module.exports = env => {
       loaders: [
         { test: /\.js$/,
           loaders: [
-            'babel',
+            'babel-loader',
           ],
           exclude: /node_modules/
         },
         {
           test: /\.css$/,
           loaders: [
-            'style',
+            'style-loader',
             'css-loader?modules',
             'postcss-loader',
           ],

content/how-to/set-up-hmr-with-react.md

@@ -2,6 +2,7 @@
 title: How to Set Up Hot Module Replacement with React?
 contributors:
   - jmreidy
+  - jhnns
 ---
 Hot Module Replacement (HMR) exchanges, adds, or removes modules while an
 application is running without a page reload.
@@ -110,14 +111,14 @@ module.exports = env => {
       loaders: [
         { test: /\.js$/,
           loaders: [
-            'babel',
+            'babel-loader',
           ],
           exclude: /node_modules/
         },
         {
           test: /\.css$/,
           loaders: [
-            'style',
+            'style-loader',
             'css-loader?modules',
             'postcss-loader',
           ],

content/how-to/shim.md

@@ -1,5 +1,8 @@
 ---
 title: How to Shim Third Party Libraries?
+contributors:
+  - pksjce
+  - jhnns
 ---
 
 `webpack` as a module bundler can understand modules written as ES2015 modules, CommonJS or AMD. But many times, while using third party libraries, we see that they expect dependencies which are global aka `$` for `jquery`. They might also be creating global variables which need to be exported. Here we will see different ways to help webpack understand these __broken modules__.
@@ -48,7 +51,7 @@ module: {
     loaders: [
         {
             test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
-            loader: "imports?this=>window"
+            loader: "imports-loader?this=>window"
         }
     ]
 }
@@ -108,4 +111,4 @@ module: {
         /[\/\\]node_modules[\/\\]angular[\/\\]angular\.js$/
     ]
 }
-```
+```

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

@@ -2,6 +2,7 @@
 title: How to Upgrade from Webpack 1?
 contributors:
   - sokra
+  - jhnns
 ---
 
 ### `resolve.root`, `resolve.fallback`, `resolve.modulesDirectories`
@@ -26,21 +27,65 @@ This option no longer requires passing an empty string. This behavior was moved
 
 More stuff was changed here. Not listed in detail as it's not commonly used. See [resolving](/configuration/resolve) for details.
 
-### `debug`
+### `module.loaders` is now `module.rules`
 
-The `debug` option switched loaders to debug mode in webpack 1. This need to be passed via loader options in long-term. See loader documentation for relevant options.
+The old loader configuration was superseded by a more powerful rules system, which allows to configure loaders and more.
+For compatibility reasons the old syntax is still valid and the old names are parsed.
+The new naming is easier to understand to there are good reasons to upgrade the configuration.
 
-The debug mode for loaders will be removed in webpack 3 or later.
+``` diff
+  module: {
+-   loaders: [
++   rules: [
+      {
+        test: /\.css$/,
+-       loaders: [
++       use: [
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader",
+-           query: {
++           options: {
+              modules: true
+            }
+        ]
+      }
+    ]
+  }
+```
 
-To keep compatibility with old loaders, loaders can be switched to debug mode via plugin:
+### Automatic `-loader` module name extension removed
+
+It is not possible anymore to omit the `-loader` extension when referencing loaders:
 
 ``` diff
-- debug: true,
-  plugins: [
-+   new webpack.LoaderOptionsPlugin({
-+     debug: true
-+   })
-  ]
+        loaders: [
+-           "style",
++           "style-loader",
+-           "css",
++           "css-loader",
+-           "less",
++           "less-loader",
+        ]
+```
+
+See [#2986](https://github.com/webpack/webpack/issues/2986) for the reason behind this change.
+
+### `module.preLoaders` and `module.postLoaders` was removed
+
+``` diff
+  module: {
+-   preLoaders: [
++   rules: [
+      {
+        test: /\.js$/,
++       enforce: "pre",
+        loader: "eslint-loader"
+      }
+    ]
+  }
 ```
 
 ### `UglifyJsPlugin` sourceMap
@@ -117,7 +162,7 @@ plugins: [
 ```
 
 
-### full dynamic requires now fail by default
+### Full dynamic requires now fail by default
 
 A dependency with only an expression (i. e. `require(expr)`) will now create an empty context instead of an context of the complete directory.
 
@@ -157,64 +202,35 @@ See [CLI](../api/cli).
 
 These functions are now always asynchronous instead of calling their callback sync if the chunk is already loaded.
 
-### `module.loaders` is now `module.rules`
-
-The old loader configuration was superseded by a more powerful rules system, which allows to configure loaders and more.
+### `LoaderOptionsPlugin` context
 
-For compatibility reasons the old syntax is still valid and the old names are parsed.
+Some loaders need context information and read them from the configuration. This need to be passed via loader options in long-term. See loader documentation for relevant options.
 
-The new naming is easier to understand to there are good reasons to upgrade the configuration.
+To keep compatibility with old loaders, this information can be passed via plugin:
 
 ``` diff
-  module: {
--   loaders: [
-+   rules: [
-      {
-        test: /\.css$/,
--       loaders: [
-+       use: [
-          {
-            loader: "style-loader"
-          },
-          {
-            loader: "css-loader",
--           query: {
-+           options: {
-              modules: true
-            }
-        ]
-      }
-    ]
-  }
+  plugins: [
++   new webpack.LoaderOptionsPlugin({
++     options: {
++       context: __dirname
++     }
++   })
+  ]
 ```
 
-### `module.preLoaders` and `module.postLoaders` was removed
-
-``` diff
-  module: {
--   preLoaders: [
-+   rules: [
-      {
-        test: /\.js$/,
-+       enforce: "pre",
-        loader: "eslint-loader"
-      }
-    ]
-  }
-```
+### `debug`
 
-### `LoaderOptionPlugin` context
+The `debug` option switched loaders to debug mode in webpack 1. This need to be passed via loader options in long-term. See loader documentation for relevant options.
 
-Some loaders need context information and read them from the configuration. This need to be passed via loader options in long-term. See loader documentation for relevant options.
+The debug mode for loaders will be removed in webpack 3 or later.
 
-To keep compatibility with old loaders, this information can be passed via plugin:
+To keep compatibility with old loaders, loaders can be switched to debug mode via plugin:
 
 ``` diff
+- debug: true,
   plugins: [
 +   new webpack.LoaderOptionsPlugin({
-+     options: {
-+       context: __dirname
-+     }
++     debug: true
 +   })
   ]
 ```