Webpack test.js uses resolve.root too

I realised I should make the change in the test config as well. 

And it seems to better if the test config inherits from baseConfig and defaultSettings where possible, so I did that. That way you are testing as close to your actual config as possible. Especially because there is one test of the config path.

.eslintrc

@@ -14,7 +14,8 @@
     "browser": true,
     "amd": true,
     "es6": true,
-    "node": true
+    "node": true,
+    "mocha": true
   },
   "rules": {
     "comma-dangle": 1,

CHANGELOG.md

@@ -1,5 +1,20 @@
 # react-webpack-template - Changelog
 
+## 1.5.3:
+
+1. Asset paths are now relative (makes it easier to use bundles in subdirectories)
+2. Removed loading problems for webpack configurations overriding (see https://github.com/newtriks/generator-react-webpack/issues/194)
+3. Added missing loader configuration for movies and svg file types
+
+## 1.5.2:
+
+1. Updated dependencies to latests (babel-eslint, eslint, karma-mocha-reporter, normalize.css)
+
+## 1.5.1:
+
+1. Emergency fix for correct eslint version (2.3 is currently buggy). Fixes https://github.com/newtriks/generator-react-webpack/issues/196
+2. Added mocha to eslint global config as requested in https://github.com/newtriks/generator-react-webpack/issues/195
+
 ## 1.5.0:
 
 1. Added babel polyfill to tests per default (provided by [Igonato](https://github.com/Igonato))

cfg/base.js

@@ -17,7 +17,7 @@ module.exports = {
   output: {
     path: path.join(__dirname, '/../dist/assets'),
     filename: 'app.js',
-    publicPath: defaultSettings.publicPath
+    publicPath: `.${defaultSettings.publicPath}`
   },
   devServer: {
     contentBase: './src/',
@@ -29,12 +29,18 @@ module.exports = {
   },
   resolve: {
     extensions: ['', '.js', '.jsx'],
+    root: [
+      `${defaultSettings.srcPath}/actions`,
+      `${defaultSettings.srcPath}/components`,
+      `${defaultSettings.srcPath}/dispatchers`,
+      `${defaultSettings.srcPath}/sources`,
+      `${defaultSettings.srcPath}/stores`,
+      `${defaultSettings.srcPath}/styles`,
+      `${defaultSettings.srcPath}/helpers`,
+      `${defaultSettings.srcPath}/data`,
+      `${defaultSettings.srcPath}`
+    ],
     alias: {
-      actions: `${defaultSettings.srcPath}/actions/`,
-      components: `${defaultSettings.srcPath}/components/`,
-      sources: `${defaultSettings.srcPath}/sources/`,
-      stores: `${defaultSettings.srcPath}/stores/`,
-      styles: `${defaultSettings.srcPath}/styles/`,
       config: `${defaultSettings.srcPath}/config/` + process.env.REACT_WEBPACK_ENV
     }
   },

cfg/defaults.js

@@ -47,6 +47,10 @@ function getDefaultModules() {
       {
         test: /\.(png|jpg|gif|woff|woff2)$/,
         loader: 'url-loader?limit=8192'
+      },
+      {
+        test: /\.(mp4|ogg|svg)$/,
+        loader: 'file-loader'
       }
     ]
   };

cfg/test.js

@@ -1,8 +1,7 @@
 'use strict';
 
 let path = require('path');
-let srcPath = path.join(__dirname, '/../src/');
+let defaultSettings = require('./defaults');
-
 let baseConfig = require('./base');
 
 // Add needed plugins here
@@ -40,15 +39,11 @@ module.exports = {
   },
   resolve: {
     extensions: [ '', '.js', '.jsx' ],
-    alias: {
+    root: [].concat(
-      actions: srcPath + 'actions/',
+        baseConfig.resolve.root,
-      helpers: path.join(__dirname, '/../test/helpers'),
+        [`${defaultSettings.srcPath}/test`]
-      components: srcPath + 'components/',
+    ),
-      sources: srcPath + 'sources/',
+    alias: baseConfig.resolve.alias
-      stores: srcPath + 'stores/',
-      styles: srcPath + 'styles/',
-      config: srcPath + 'config/' + process.env.REACT_WEBPACK_ENV
-    }
   },
   plugins: [
     new BowerWebpackPlugin({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-webpack-template",
-  "version": "1.5.0",
+  "version": "1.5.3",
   "description": "A base skeleton template for react and webpack without task runners",
   "main": "server.js",
   "scripts": {
@@ -37,7 +37,7 @@
   "homepage": "https://github.com/weblogixx/react-webpack-template#readme",
   "devDependencies": {
     "babel-core": "^6.0.0",
-    "babel-eslint": "^5.0.0",
+    "babel-eslint": "^6.0.0",
     "babel-loader": "^6.0.0",
     "babel-polyfill": "^6.3.14",
     "babel-preset-es2015": "^6.0.15",
@@ -46,7 +46,7 @@
     "chai": "^3.2.0",
     "copyfiles": "^0.2.1",
     "css-loader": "^0.23.0",
-    "eslint": "^2.0.0",
+    "eslint": "^2.2.0",
     "eslint-loader": "^1.0.0",
     "eslint-plugin-react": "^4.0.0",
     "file-loader": "^0.8.4",
@@ -56,7 +56,7 @@
     "karma-chai": "^0.1.0",
     "karma-coverage": "^0.5.3",
     "karma-mocha": "^0.2.0",
-    "karma-mocha-reporter": "^1.1.1",
+    "karma-mocha-reporter": "^2.0.0",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.5",
     "karma-webpack": "^1.7.0",
@@ -75,7 +75,7 @@
   },
   "dependencies": {
     "core-js": "^2.0.0",
-    "normalize.css": "^3.0.3",
+    "normalize.css": "^4.0.0",
     "react": "^0.14.0",
     "react-dom": "^0.14.0"
   }

src/components/Main.js

@@ -1,4 +1,4 @@
-require('normalize.css');
+require('normalize.css/normalize.css');
 require('styles/App.css');
 
 import React from 'react';

src/index.html

@@ -11,6 +11,6 @@
   <div id="app">APPLICATION CONTENT</div>
 
   <script>__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__</script>
-  <script type="text/javascript" src="assets/app.js"></script>
+  <script type="text/javascript" src="./assets/app.js"></script>
 </body>
 </html>

webpack.config.js

@@ -8,7 +8,7 @@ const allowedEnvs = ['dev', 'dist', 'test'];
 
 // Set the correct environment
 var env;
-if(args._.length > 0 && args._.indexOf('start') !== -1) {
+if (args._.length > 0 && args._.indexOf('start') !== -1) {
   env = 'test';
 } else if (args.env) {
   env = args.env;
@@ -17,14 +17,6 @@ if(args._.length > 0 && args._.indexOf('start') !== -1) {
 }
 process.env.REACT_WEBPACK_ENV = env;
 
-// Get available configurations
-const configs = {
-  base: require(path.join(__dirname, 'cfg/base')),
-  dev: require(path.join(__dirname, 'cfg/dev')),
-  dist: require(path.join(__dirname, 'cfg/dist')),
-  test: require(path.join(__dirname, 'cfg/test'))
-};
-
 /**
  * Build the webpack configuration
  * @param  {String} wantedEnv The wanted environment
@@ -33,7 +25,8 @@ const configs = {
 function buildConfig(wantedEnv) {
   let isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1;
   let validEnv = isValid ? wantedEnv : 'dev';
-  return configs[validEnv];
+  let config = require(path.join(__dirname, 'cfg/' + validEnv));
+  return config;
 }
 
 module.exports = buildConfig(env);