diff --git a/README.md b/README.md
index a276762..831a0f8 100644
--- a/README.md
+++ b/README.md
@@ -94,6 +94,7 @@ src
 
 Gantry has a purposefully slimmer webpack configuration than some other starter kits to make it easier to extend without wondering what all of the individual loaders and plugins do, whether they're being used, or if they're even necessary. Some key points of our webpack configuration are below, see the TECH.md file for the full walkthrough.
 
+* Importing absolute paths are treated as if they start in `/src` or `/node_modules`.
 * JS is handled by babel, which is configured in the .babelrc file in the root of the project.
 * SCSS Modules with sass-resources-loader are pre-configured to use the `./styles/resources` directory to auto import the files there.
 * SCSS Modules is set up with source maps disabled for production mode.
diff --git a/TECH.md b/TECH.md
index a96519c..658fae5 100644
--- a/TECH.md
+++ b/TECH.md
@@ -2,6 +2,16 @@
 
 We use one file for both Production and Development webpack setups because of webpack v4's [new `--mode` flag](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a). I followed [this tutorial](https://www.valentinog.com/blog/webpack-4-tutorial/) to get started with a basic webpack v4 config file.
 
+### Resolve
+```js
+resolve: {
+  modules: ['src', 'node_modules']
+},
+```
+Webpack's [`resolve` config](https://webpack.js.org/configuration/resolve/#resolve-alias) lets us tell it to look for absolute paths as if they were paths from `/src`.
+
+## Module
+
 Webpack's config maps different `tests` to different loaders, where the tests deal with filenames and match them with regex patterns. Each rule tests one thing and then uses the loader setup defined to handle that file type.
 
 ### JS
@@ -64,8 +74,8 @@ However, if an SVG is imported with a [resourceQuery](https://webpack.js.org/con
 #### Example SVG imports
 
 ```js
-import Crown from '../../assets/svg/crown.svg' // Will create a <Crown /> react component
-import crown from '../../assets/svg/crown.svg?external' // Will use the file loader
+import Crown from 'assets/svg/crown.svg' // Will create a <Crown /> react component
+import crown from 'assets/svg/crown.svg?external' // Will use the file loader
 // ...
 
 <Crown className={styles.crownBlue} /> // applies the className to the <svg> element and can thus manipulate the contents
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 969c587..524f709 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -96,6 +96,12 @@ module.exports = (env, argv) => {
     output: {
       publicPath: '/'
     },
+    /* This allows us to import things with absolute paths based on /src
+     * For example: import SomeComponent from 'components/someComponent'
+     */
+    resolve: {
+      modules: ['src', 'node_modules']
+    },
     module: {
       rules: [
         /* This will make the babel-loader handle all .js files. We have set up two presets in
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..6439a1a
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,15 @@
+{
+  // This fixes VSCode's "Go To Definition" breaking with our absolute paths from src based on webpackconfig.resolve.modules
+  // https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases
+  "compilerOptions": {
+    // This must be specified if "paths" is set
+    "baseUrl": ".",
+    // Relative to "baseUrl"
+    "paths": {
+      "*": [
+        "*",
+        "src/*"
+      ]
+    }
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 1d97736..80ffd5f 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     ]
   },
   "jest": {
+    "moduleDirectories": ["node_modules", "src"],
     "moduleNameMapper": {
       "^.+\\.s?css$": "identity-obj-proxy",
       "^.+\\.svg\\?external$": "<rootDir>/config/fileMock.js"
diff --git a/src/containers/profile/profileContainer.js b/src/containers/profile/profileContainer.js
index 22eeed1..7c98ca9 100644
--- a/src/containers/profile/profileContainer.js
+++ b/src/containers/profile/profileContainer.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import {connect} from 'react-redux'
 import PropTypes from 'prop-types'
-import userActions from '../../redux/user/userActions'
+import userActions from 'redux/user/userActions'
 import styles from './profile-container.scss'
-import Avatar from '../../components/avatar/avatar'
-import Gear from '../../assets/svg/repairing-service.svg'
-import gearSrc from '../../assets/svg/repairing-service.svg?external'
+import Avatar from 'components/avatar/avatar'
+import Gear from 'assets/svg/repairing-service.svg'
+import gearSrc from 'assets/svg/repairing-service.svg?external'
 
 export class Profile extends React.Component {
   getProfileDetails = () => {
diff --git a/src/redux/user/userActions.js b/src/redux/user/userActions.js
index 79f7f66..6dcc5b7 100644
--- a/src/redux/user/userActions.js
+++ b/src/redux/user/userActions.js
@@ -1,4 +1,4 @@
-// import { getSkillsData } from '../../services/profile'
+// import { getSkillsData } from 'services/profile'
 import { sampleNames, sampleSkills } from '../../../testing/stubs'
 
 /* Action Type Constants */
diff --git a/src/redux/user/userReducer.js b/src/redux/user/userReducer.js
index aeb795a..b3e4127 100644
--- a/src/redux/user/userReducer.js
+++ b/src/redux/user/userReducer.js
@@ -1,4 +1,4 @@
-import createReducer from '../../utils/createReducer'
+import createReducer from 'utils/createReducer'
 import {types} from './userActions'
 
 /* State Shape
diff --git a/src/views/home/home.js b/src/views/home/home.js
index 9a0bef1..be09640 100644
--- a/src/views/home/home.js
+++ b/src/views/home/home.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styles from './home.scss'
-import Profile from '../../containers/profile/profileContainer'
+import Profile from 'containers/profile/profileContainer'
 
 class HomeRoute extends React.Component {
   render () {