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

@@ -3,15 +3,19 @@
   "plugins": [
     "react"
   ],
-  "ecmaFeatures": {
+  "parserOptions": {
-    "jsx": true,
+    "ecmaVersion": 6,
-    "modules": true
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
   },
   "env": {
     "browser": true,
     "amd": true,
     "es6": true,
-    "node": true
+    "node": true,
+    "mocha": true
   },
   "rules": {
     "comma-dangle": 1,
@@ -25,6 +29,7 @@
     "no-trailing-spaces": [1, { "skipBlankLines": true }],
     "no-unreachable": 1,
     "no-alert": 0,
-    "react/jsx-uses-react": 1
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1
   }
 }

CHANGELOG.md

@@ -1,5 +1,50 @@
 # 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))
+2. Updated eslint to version 2.0
+3. Updated glob package to version 7.0
+
+## 1.4.0:
+
+1. Refactored webpack config to use Object.assign instead of lodash
+2. Added dynamic port for webpack dev server (provided by [kashiif](https://github.com/kashiif))
+
+## 1.3.1:
+
+1. Removed karma-phantomjs-shim (with PhantomJS 2 there is no need for shims anymore)
+
+## 1.3.0:
+
+1. Updated phantomjs to 2.0
+
+## 1.2.1:
+
+1. Updated lodash to latest stable version
+2. Cleaned up formatting of unittests
+
+## 1.2.0:
+
+1. Updated core-js to new 2.0 stable
+2. Moved lodash and react-addons-testutils to devDependencies (provided by [harunhasdal](https://github.com/harunhasdal))
+3. Moved run component from ```src/components/run.js``` to ```src/index.js``` (provided by [stylesuxx](https://github.com/stylesuxx))
+
 ## 1.1.0:
 
 1. Added support for easier webpack include management (can now be set via cfg/base.js, see README.md)

README.md

@@ -9,15 +9,12 @@ The following features are currently included:
 
 - [x] Webpack and Webpack-Dev-Server, including hot-loader
 - [x] Babel and JSX
-- [x] Mocha Unit tests (*optional*)
+- [x] Mocha Unit tests
 - [x] esLint Support
 - [x] No dependency on grunt, gulp or the next hot taskrunner!
 - [x] Support for environment-specific configuration files
 - [x] Support for code coverage via [isparta-loader](https://github.com/deepsweet/isparta-loader)
 
-## Todo
-- [ ] Better performance for webpack builds
-
 ## What is it for?
 This template can be used directly for the creation of new projects. When using it like this, make sure to ___not___ install it via npm but download it directly. The template is (nearly) useless for itself when downloaded via npm!
 
@@ -111,3 +108,5 @@ react-webpack-template is available under MIT-License and can therefore be used
 - Christian Schilling (cs@weblogixx.de)
 - Martin Jul (martin@mjul.com)
 - Stephan Herzog (sthzgvie@gmail.com)
+- Kashif Iqbal Khan
+- Ignat Shining (mail@igonato.com)

cfg/base.js

@@ -1,9 +1,6 @@
 'use strict';
 let path = require('path');
-
+let defaultSettings = require('./defaults');
-let port = 8000;
-let srcPath = path.join(__dirname, '/../src');
-let publicPath = '/assets/';
 
 // Additional npm or bower modules to include in builds
 // Add all foreign plugins you may need into this array
@@ -14,65 +11,38 @@ let additionalPaths = [];
 
 module.exports = {
   additionalPaths: additionalPaths,
-  port: port,
+  port: defaultSettings.port,
   debug: true,
+  devtool: 'eval',
   output: {
     path: path.join(__dirname, '/../dist/assets'),
     filename: 'app.js',
-    publicPath: publicPath
+    publicPath: `.${defaultSettings.publicPath}`
   },
   devServer: {
     contentBase: './src/',
     historyApiFallback: true,
     hot: true,
-    port: port,
+    port: defaultSettings.port,
-    publicPath: publicPath,
+    publicPath: defaultSettings.publicPath,
     noInfo: false
   },
   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: srcPath + '/actions/',
+      config: `${defaultSettings.srcPath}/config/` + process.env.REACT_WEBPACK_ENV
-      components: srcPath + '/components/',
-      sources: srcPath + '/sources/',
-      stores: srcPath + '/stores/',
-      styles: srcPath + '/styles/',
-      config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV
     }
   },
-  module: {
+  module: {}
-    preLoaders: [
-      {
-        test: /\.(js|jsx)$/,
-        include: srcPath,
-        loader: 'eslint-loader'
-      }
-    ],
-    loaders: [
-      {
-        test: /\.css$/,
-        loader: 'style-loader!css-loader'
-      },
-      {
-        test: /\.sass/,
-        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
-      },
-      {
-        test: /\.scss/,
-        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
-      },
-      {
-        test: /\.less/,
-        loader: 'style-loader!css-loader!less-loader'
-      },
-      {
-        test: /\.styl/,
-        loader: 'style-loader!css-loader!stylus-loader'
-      },
-      {
-        test: /\.(png|jpg|gif|woff|woff2)$/,
-        loader: 'url-loader?limit=8192'
-      }
-    ]
-  }
 };

cfg/defaults.js

@@ -0,0 +1,64 @@
+/**
+ * Function that returns default values.
+ * Used because Object.assign does a shallow instead of a deep copy.
+ * Using [].push will add to the base array, so a require will alter
+ * the base array output.
+ */
+'use strict';
+
+const path = require('path');
+const srcPath = path.join(__dirname, '/../src');
+const dfltPort = 8000;
+
+/**
+ * Get the default modules object for webpack
+ * @return {Object}
+ */
+function getDefaultModules() {
+  return {
+    preLoaders: [
+      {
+        test: /\.(js|jsx)$/,
+        include: srcPath,
+        loader: 'eslint-loader'
+      }
+    ],
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: 'style-loader!css-loader'
+      },
+      {
+        test: /\.sass/,
+        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
+      },
+      {
+        test: /\.scss/,
+        loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded'
+      },
+      {
+        test: /\.less/,
+        loader: 'style-loader!css-loader!less-loader'
+      },
+      {
+        test: /\.styl/,
+        loader: 'style-loader!css-loader!stylus-loader'
+      },
+      {
+        test: /\.(png|jpg|gif|woff|woff2)$/,
+        loader: 'url-loader?limit=8192'
+      },
+      {
+        test: /\.(mp4|ogg|svg)$/,
+        loader: 'file-loader'
+      }
+    ]
+  };
+}
+
+module.exports = {
+  srcPath: srcPath,
+  publicPath: '/assets/',
+  port: dfltPort,
+  getDefaultModules: getDefaultModules
+};

cfg/dev.js

@@ -2,31 +2,31 @@
 
 let path = require('path');
 let webpack = require('webpack');
-let _ = require('lodash');
-
 let baseConfig = require('./base');
+let defaultSettings = require('./defaults');
 
 // Add needed plugins here
 let BowerWebpackPlugin = require('bower-webpack-plugin');
 
-let config = _.merge({
+let config = Object.assign({}, baseConfig, {
   entry: [
-    'webpack-dev-server/client?http://127.0.0.1:8000',
+    'webpack-dev-server/client?http://127.0.0.1:' + defaultSettings.port,
     'webpack/hot/only-dev-server',
-    './src/components/run'
+    './src/index'
   ],
   cache: true,
-  devtool: 'eval',
+  devtool: 'eval-source-map',
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
     new BowerWebpackPlugin({
       searchResolveModulesDirectories: false
     })
-  ]
+  ],
-}, baseConfig);
+  module: defaultSettings.getDefaultModules()
+});
 
-// Add needed loaders
+// Add needed loaders to the defaults here
 config.module.loaders.push({
   test: /\.(js|jsx)$/,
   loader: 'react-hot!babel-loader',

cfg/dist.js

@@ -2,15 +2,15 @@
 
 let path = require('path');
 let webpack = require('webpack');
-let _ = require('lodash');
 
 let baseConfig = require('./base');
+let defaultSettings = require('./defaults');
 
 // Add needed plugins here
 let BowerWebpackPlugin = require('bower-webpack-plugin');
 
-let config = _.merge({
+let config = Object.assign({}, baseConfig, {
-  entry: path.join(__dirname, '../src/components/run'),
+  entry: path.join(__dirname, '../src/index'),
   cache: false,
   devtool: 'sourcemap',
   plugins: [
@@ -25,9 +25,11 @@ let config = _.merge({
     new webpack.optimize.OccurenceOrderPlugin(),
     new webpack.optimize.AggressiveMergingPlugin(),
     new webpack.NoErrorsPlugin()
-  ]
+  ],
-}, baseConfig);
+  module: defaultSettings.getDefaultModules()
+});
 
+// Add needed loaders to the defaults here
 config.module.loaders.push({
   test: /\.(js|jsx)$/,
   loader: 'babel',

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({

karma.conf.js

@@ -9,7 +9,7 @@ module.exports = function(config) {
     ],
     port: 8080,
     captureTimeout: 60000,
-    frameworks: [ 'phantomjs-shim', 'mocha', 'chai' ],
+    frameworks: [ 'mocha', 'chai' ],
     client: {
       mocha: {}
     },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-webpack-template",
-  "version": "1.1.0",
+  "version": "1.5.3",
   "description": "A base skeleton template for react and webpack without task runners",
   "main": "server.js",
   "scripts": {
@@ -37,34 +37,35 @@
   "homepage": "https://github.com/weblogixx/react-webpack-template#readme",
   "devDependencies": {
     "babel-core": "^6.0.0",
-    "babel-eslint": "^5.0.0-beta4",
+    "babel-eslint": "^6.0.0",
     "babel-loader": "^6.0.0",
+    "babel-polyfill": "^6.3.14",
     "babel-preset-es2015": "^6.0.15",
     "babel-preset-react": "^6.0.15",
     "bower-webpack-plugin": "^0.1.9",
     "chai": "^3.2.0",
     "copyfiles": "^0.2.1",
     "css-loader": "^0.23.0",
-    "eslint": "^1.2.1",
+    "eslint": "^2.2.0",
     "eslint-loader": "^1.0.0",
-    "eslint-plugin-react": "^3.3.0",
+    "eslint-plugin-react": "^4.0.0",
     "file-loader": "^0.8.4",
-    "glob": "^6.0.0",
+    "glob": "^7.0.0",
     "isparta-instrumenter-loader": "^1.0.0",
     "karma": "^0.13.9",
     "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": "^0.2.1",
+    "karma-phantomjs-launcher": "^1.0.0",
-    "karma-phantomjs-shim": "^1.1.1",
     "karma-sourcemap-loader": "^0.3.5",
     "karma-webpack": "^1.7.0",
     "minimist": "^1.2.0",
     "mocha": "^2.2.5",
     "null-loader": "^0.1.1",
     "open": "0.0.5",
-    "phantomjs": "^1.9.18",
+    "phantomjs-prebuilt": "^2.0.0",
+    "react-addons-test-utils": "^0.14.0",
     "react-hot-loader": "^1.2.9",
     "rimraf": "^2.4.3",
     "style-loader": "^0.13.0",
@@ -73,11 +74,9 @@
     "webpack-dev-server": "^1.12.0"
   },
   "dependencies": {
-    "core-js": "^1.2.6",
+    "core-js": "^2.0.0",
-    "lodash": "^3.10.1",
+    "normalize.css": "^4.0.0",
-    "normalize.css": "^3.0.3",
     "react": "^0.14.0",
-    "react-addons-test-utils": "^0.14.0",
     "react-dom": "^0.14.0"
   }
 }

server.js

@@ -1,12 +1,13 @@
 /*eslint no-console:0 */
+'use strict';
 require('core-js/fn/object/assign');
-var webpack = require('webpack');
+const webpack = require('webpack');
-var WebpackDevServer = require('webpack-dev-server');
+const WebpackDevServer = require('webpack-dev-server');
-var config = require('./webpack.config');
+const config = require('./webpack.config');
-var open = require('open');
+const open = require('open');
 
 new WebpackDevServer(webpack(config), config.devServer)
-.listen(config.port, 'localhost', function(err) {
+.listen(config.port, 'localhost', (err) => {
   if (err) {
     console.log(err);
   }

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/config/base.js

@@ -1,6 +1,5 @@
 'use strict';
 
-
 // Settings configured here will be merged into the final config object.
 export default {
 }

src/config/dev.js

@@ -2,7 +2,6 @@
 
 import baseConfig from './base';
 
-
 let config = {
   appEnv: 'dev'  // feel free to remove the appEnv property here
 };

src/config/dist.js

@@ -2,10 +2,8 @@
 
 import baseConfig from './base';
 
-
 let config = {
   appEnv: 'dist'  // feel free to remove the appEnv property here
 };
 
 export default Object.freeze(Object.assign({}, baseConfig, config));
-

src/config/test.js

@@ -2,10 +2,8 @@
 
 import baseConfig from './base';
 
-
 let config = {
   appEnv: 'test'  // don't remove the appEnv property here
 };
 
 export default Object.freeze(Object.assign(baseConfig, config));
-

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>

src/index.js

@@ -1,7 +1,7 @@
 import 'core-js/fn/object/assign';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './Main';
+import App from './components/Main';
 
 // Render the main component into the dom
 ReactDOM.render(<App />, document.getElementById('app'));

test/components/MainTest.js

@@ -11,13 +11,13 @@ import createComponent from 'helpers/shallowRenderHelper';
 import Main from 'components/Main';
 
 describe('MainComponent', () => {
-    let MainComponent;
+  let MainComponent;
 
-    beforeEach(() => {
+  beforeEach(() => {
-      MainComponent = createComponent(Main);
+    MainComponent = createComponent(Main);
-    });
+  });
 
-    it('should have its component name as default className', () => {
+  it('should have its component name as default className', () => {
-      expect(MainComponent.props.className).to.equal('index');
+    expect(MainComponent.props.className).to.equal('index');
-    });
+  });
 });

test/loadtests.js

@@ -1,5 +1,6 @@
 'use strict';
 
+require('babel-polyfill');
 require('core-js/fn/object/assign');
 
 // Add support for all files in the test directory

webpack.config.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var path = require('path');
+const path = require('path');
-var args = require('minimist')(process.argv.slice(2));
+const args = require('minimist')(process.argv.slice(2));
 
 // List of allowed environments
-var allowedEnvs = ['dev', 'dist', 'test'];
+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,32 +17,16 @@ if(args._.length > 0 && args._.indexOf('start') !== -1) {
 }
 process.env.REACT_WEBPACK_ENV = env;
 
-// Get available configurations
-var 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'))
-};
-
-/**
- * Get an allowed environment
- * @param  {String}  env
- * @return {String}
- */
-function getValidEnv(env) {
-  var isValid = env && env.length > 0 && allowedEnvs.indexOf(env) !== -1;
-  return isValid ? env : 'dev';
-}
-
 /**
  * Build the webpack configuration
- * @param  {String} env Environment to use
+ * @param  {String} wantedEnv The wanted environment
  * @return {Object} Webpack config
  */
-function buildConfig(env) {
+function buildConfig(wantedEnv) {
-  var usedEnv = getValidEnv(env);
+  let isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1;
-  return configs[usedEnv];
+  let validEnv = isValid ? wantedEnv : 'dev';
+  let config = require(path.join(__dirname, 'cfg/' + validEnv));
+  return config;
 }
 
 module.exports = buildConfig(env);