Add Better Module Imports With Aliases as a webpack til

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