Added webpack.aliases config

Closes #125

CHANGES.md

@@ -50,6 +50,7 @@
 
 **Added:**
 
+- Added [`webpack.aliases` config](https://github.com/insin/nwb/blob/0.12/docs/Configuration.md#aliases-object) to set up module resolving aliases, as a convenient alternative to using `webpack.extra.resolve.alias` config [[#125](https://github.com/insin/nwb/issues/125)]
 - Production React builds now remove propTypes using [babel-plugin-transform-react-remove-prop-types](https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types) [[#97](https://github.com/insin/nwb/issues/97)]
 - Added [`babel.runtime` config](https://github.com/insin/nwb/blob/0.12/docs/Configuration.md#runtime-string--boolean) to enable the Babel runtime transform, replacing Babel 5's `optional` config. You can use all the features of the transform or pick and choose.
 - Added [`webpack.uglify` config](https://github.com/insin/nwb/blob/0.12/docs/Configuration.md#uglify-object) to allow customisation of Webpack `UglifyJsPlugin` options.

docs/Configuration.md

@@ -29,6 +29,7 @@ The configuration object provided by your nwb config module can use the followin
   - [`webpack.loaders`](#loaders-object)
     - [Default loaders](#default-loaders)
     - [Test loaders](#test-loaders)
+  - [`webpack.aliases`](#aliases-object)
   - [`webpack.define`](#define-object)
   - [`webpack.extractText`](#extracttext-object)
   - [`webpack.html`](#html-object)
@@ -308,6 +309,31 @@ When running Karma tests with coverage enabled, the following loader will be add
   }
   ```
 
+##### `aliases`: `Object`
+
+Configures [Webpack aliases](https://webpack.github.io/docs/resolving.html#aliasing), which allow you to control module resolution. Typically aliases are used to make it easier to import certain modules from within any depth of nested directories in an app.
+
+e.g.:
+
+```js
+module.exports = {
+  webpack: {
+    aliases: {
+      // Enable use of 'images/file.png' paths in JavaScript and
+      // "~images/file.png" paths in stylesheets to require an image from
+      // src/images from anywhere in the the app.
+      'images': path.resolve('src/images'),
+      // Enable use of require('src/path/to/module.js') for top-down imports
+      // from anywhere in the app, to promote writing location-independent
+      // code by avoiding ../ directory traversal.
+      'src': path.resolve('src')
+    }
+  }
+}
+```
+
+You should be careful to avoid creating aliases which conflict with the names of any npm packages you use or will be likely to use in the future.
+
 ##### `define`: `Object`
 
 By default, nwb will use Webpack's [`DefinePlugin`](https://webpack.github.io/docs/list-of-plugins.html#defineplugin) to replace all occurances of `process.env.NODE_ENV` with a string containing `NODE_ENV`'s current value.
@@ -537,13 +563,6 @@ function(nwb) {
             {test: /\.html$/, loader: 'html'}
           ]
         },
-        // Allow the use of require('images/blah.png') to require from an
-        // src/images from anywhere in the the app.
-        resolve: {
-          alias: {
-            'images': path.resolve('src/images')
-          }
-        },
         // Example of adding an extra plugin which isn't managed by nwb
         plugins: [
           new nwb.webpack.optimize.MinChunkSizePlugin({

src/createWebpackConfig.js

@@ -509,6 +509,7 @@ export default function createWebpackConfig(buildConfig, nwbPluginConfig = {}, u
   } = buildConfig
 
   let userWebpackConfig = userConfig.webpack || {}
+  let userResolveConfig = {alias: userWebpackConfig.aliases || {}}
 
   // Generate config for babel-loader and set it as loader config for the build
   buildLoaderConfig.babel = {query: createBabelConfig(buildBabelConfig, userConfig.babel)}
@@ -521,10 +522,9 @@ export default function createWebpackConfig(buildConfig, nwbPluginConfig = {}, u
     resolve: merge({
       extensions: ['', '.web.js', '.js', '.jsx', '.json'],
       // Fall back to resolving runtime dependencies from nwb's dependencies,
-      // e.g. for babel-runtime when using Babel stage: 0 and optional:
-      // ['runtime'] for async/await.
-      fallback: path.join(__dirname, '../node_modules')
-    }, buildResolveConfig),
+      // e.g. for babel-runtime when using the transform-runtime plugin.
+      fallback: path.join(__dirname, '../node_modules'),
+    }, buildResolveConfig, userResolveConfig),
     postcss: createPostCSSConfig(userWebpackConfig.postcss, nwbPluginConfig.cssPreprocessors),
     ...otherBuildConfig,
     // Top level loader config can be supplied via user "loaders" config, so we

tests/createWebpackConfig-test.js

@@ -99,6 +99,35 @@ describe('createWebpackConfig()', () => {
     })
   })
 
+  context('with aliases config', () => {
+    it('sets up resolve.alias', () => {
+      let config = createWebpackConfig({}, {}, {
+        webpack: {
+          aliases: {
+            src: 'test'
+          }
+        }
+      })
+      expect(config.resolve.alias.src).toEqual('test')
+    })
+    it('overwrites build resolve.alias config', () => {
+      let config = createWebpackConfig({
+        resolve: {
+          alias: {
+            src: 'fail'
+          }
+        }
+      }, {}, {
+        webpack: {
+          aliases: {
+            src: 'pass'
+          }
+        }
+      })
+      expect(config.resolve.alias.src).toEqual('pass')
+    })
+  })
+
   context('with compat config', () => {
     it('creates and merges compat config', () => {
       let config = createWebpackConfig({}, {}, {