From b50ff62bc75aff1792ed01a795dda87ce7a82b21 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Tue, 5 Apr 2016 09:41:32 -0500
Subject: [PATCH] Add Better Module Imports With Aliases as a webpack til

---
 README.md                                     |  3 +-
 webpack/better-module-imports-with-aliases.md | 40 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 webpack/better-module-imports-with-aliases.md

diff --git a/README.md b/README.md
index bdc0b66..d3dfe4c 100644
--- a/README.md
+++ b/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/).
 
-_385 TILs and counting..._
+_386 TILs and counting..._
 
 ---
 
@@ -469,6 +469,7 @@ _385 TILs and counting..._
 
 ## Webpack
 
+- [Better Module Imports With Aliases](webpack/better-module-imports-with-aliases.md)
 - [Debugging With Full Source Maps](webpack/debugging-with-full-source-maps.md)
 - [Run ESLint As A Preloader](webpack/run-eslint-as-a-preloader.md)
 - [Use A Specific Config File](webpack/use-a-specific-config-file.md)
diff --git a/webpack/better-module-imports-with-aliases.md b/webpack/better-module-imports-with-aliases.md
new file mode 100644
index 0000000..e5c6722
--- /dev/null
+++ b/webpack/better-module-imports-with-aliases.md
@@ -0,0 +1,40 @@
+# Better Module Imports With Aliases
+
+Depending on how your JavaScript project is structured, you can end up with
+import statements that look like this:
+
+```javascript
+import SomeComponent from 'app/assets/javascripts/components/SomeComponent.jsx';
+```
+
+or this:
+
+```javascript
+import SomeComponent from '../components/SomeComponent.jsx';
+```
+
+The first is simply too long and the second is both ugly and brittle to
+changes in file location. This can all be _resolved_ with a
+[Webpack](https://webpack.github.io/) alias.
+
+```
+// webpack.config.js
+resolve: {
+  alias: {
+    components: "app/assets/javascripts/components",
+  },
+},
+```
+
+Webpack will use this `alias` when resolving module imports like the
+following updated example:
+
+```javascript
+import SomeComponent from 'components/SomeComponent.jsx';
+```
+
+See the
+[`resolve.alias`](https://webpack.github.io/docs/configuration.html#resolve-alias)
+section of the Webpack docs for more details.
+
+h/t Vidal Ekechukwu