Add Run ESLint As A Preloader as a webpack til

Author: jbranchaud

README.md

@@ -7,7 +7,7 @@ variety of languages and technologies. These are things that don't really
 warrant a full blog post. These are mostly things I learn by pairing with
 smart people at [Hashrocket](http://hashrocket.com/).
 
-_368 TILs and counting..._
+_369 TILs and counting..._
 
 ---
 
@@ -446,6 +446,7 @@ _368 TILs and counting..._
 
 ## Webpack
 
+- [Run ESLint As A Preloader](webpack/run-eslint-as-a-preloader.md)
 - [Use A Specific Config File](webpack/use-a-specific-config-file.md)
 
 ## Usage

webpack/run-eslint-as-a-preloader.md

@@ -0,0 +1,29 @@
+# Run ESLint As A Preloader
+
+You may already be running [ESLint](http://eslint.org/) manually or as a
+script command via `npm`.  You can also include it as part of the Webpack
+build process. By adding it as a *preloader*, Webpack will lint your
+JavaScript files before running other loaders. The results of
+linting will be reported in the terminal. Assuming you've already installed
+`eslint` and set up your `.eslintrc` file, all you need to do is `npm
+install --save-dev eslint-loader` and then add something like the following
+to your `webpack.config.js` file:
+
+```javascript
+module: {
+  preLoaders: [
+    {
+      test: /\.js$/,
+      loaders: ['eslint'],
+      exclude: /node_modules/,
+    }
+  ],
+  ...
+}
+```
+
+Running something like `webpack -w` will now lint your JavaScript before
+running other loaders.
+
+Depending on your project, you may also want to include `babel-eslint` and
+`eslint-plugin-react` with your setup.