Add Better Module Imports With Aliases as a webpack til

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)

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