Added better support for external package includes

CHANGELOG.md

@@ -1,5 +1,15 @@
 # react-webpack-template - Changelog
 
+## 1.1.0:
+
+1. Added support for easier webpack include management (can now be set via cfg/base.js, see README.md)
+
+## 1.0.3:
+
+1. Support for config independent settings in ```src/config/base.js``` (provided by [sthzg](https://github.com/sthzg))
+2. Fixed eslint loader path (provided by [HelloYie](https://github.com/HelloYie))
+3. Added support for babel-eslint (as suggested in https://github.com/newtriks/generator-react-webpack/issues/173)
+
 ## 1.0.2:
 
 1. Added babel-eslint (as suggested in https://github.com/newtriks/generator-react-webpack/issues/173)

README.md

@@ -25,6 +25,7 @@ Basically, it is currently only used as the base template of [generator-react-we
 
 ## Using it
 The template uses webpack as build tool to serve files and run tests. The following commands are available:
+
 ```bash
 # Start for development
 npm start # or
@@ -53,6 +54,7 @@ npm run copy
 ```
 
 You can also use your globally installed version of webpack like this:
+
 ```bash
 # Build or run the dev version:
 webpack
@@ -65,6 +67,18 @@ webpack-dev-server --env=dev
 webpack --env=dist
 webpack-dev-server --env=dist
 ```
+
+## Including third party modules (e.g. from npm)
+The default setting for the webpack configuration is to only include the ```src``` and ```test``` directories. If you want to add any modules from npm, you have to add them in ```cfg/base.js```. One example is:
+
+```javascript
+// Somewhere on top of the file:
+let npmBase = path.join(__dirname, '../node_modules');
+let additionalPaths = [ path.join(npmBase, 'react-bootstrap') ];
+```
+
+All entries added to the additionalPaths array will be appended to the include path for babel.
+
 ## A note on unit testing
 When running tests, coverage information (provided via Istanbul) will also be written into the ```coverage/``` directory. If you do not need this, just comment out or remove the section in ```karma.conf``` like this:
 

cfg/base.js

@@ -1,10 +1,19 @@
-var path = require('path');
+'use strict';
+let path = require('path');
 
-var port = 8000;
+let port = 8000;
-var srcPath = path.join(__dirname, '/../src');
+let srcPath = path.join(__dirname, '/../src');
-var publicPath = '/assets/';
+let publicPath = '/assets/';
+
+// Additional npm or bower modules to include in builds
+// Add all foreign plugins you may need into this array
+// @example:
+// let npmBase = path.join(__dirname, '../node_modules');
+// let additionalPaths = [ path.join(npmBase, 'react-bootstrap') ];
+let additionalPaths = [];
 
 module.exports = {
+  additionalPaths: additionalPaths,
   port: port,
   debug: true,
   output: {

cfg/dev.js

@@ -1,13 +1,15 @@
-var path = require('path');
+'use strict';
-var webpack = require('webpack');
-var _ = require('lodash');
 
-var baseConfig = require('./base');
+let path = require('path');
+let webpack = require('webpack');
+let _ = require('lodash');
+
+let baseConfig = require('./base');
 
 // Add needed plugins here
-var BowerWebpackPlugin = require('bower-webpack-plugin');
+let BowerWebpackPlugin = require('bower-webpack-plugin');
 
-var config = _.merge({
+let config = _.merge({
   entry: [
     'webpack-dev-server/client?http://127.0.0.1:8000',
     'webpack/hot/only-dev-server',
@@ -28,7 +30,10 @@ var config = _.merge({
 config.module.loaders.push({
   test: /\.(js|jsx)$/,
   loader: 'react-hot!babel-loader',
-  include: path.join(__dirname, '/../src')
+  include: [].concat(
+    config.additionalPaths,
+    [ path.join(__dirname, '/../src') ]
+  )
 });
 
 module.exports = config;

cfg/dist.js

@@ -1,13 +1,15 @@
-var path = require('path');
+'use strict';
-var webpack = require('webpack');
-var _ = require('lodash');
 
-var baseConfig = require('./base');
+let path = require('path');
+let webpack = require('webpack');
+let _ = require('lodash');
+
+let baseConfig = require('./base');
 
 // Add needed plugins here
-var BowerWebpackPlugin = require('bower-webpack-plugin');
+let BowerWebpackPlugin = require('bower-webpack-plugin');
 
-var config = _.merge({
+let config = _.merge({
   entry: path.join(__dirname, '../src/components/run'),
   cache: false,
   devtool: 'sourcemap',
@@ -29,7 +31,10 @@ var config = _.merge({
 config.module.loaders.push({
   test: /\.(js|jsx)$/,
   loader: 'babel',
-  include: path.join(__dirname, '/../src')
+  include: [].concat(
+    config.additionalPaths,
+    [ path.join(__dirname, '/../src') ]
+  )
 });
 
 module.exports = config;

cfg/test.js

@@ -1,8 +1,12 @@
-var path = require('path');
+'use strict';
-var srcPath = path.join(__dirname, '/../src/');
+
+let path = require('path');
+let srcPath = path.join(__dirname, '/../src/');
+
+let baseConfig = require('./base');
 
 // Add needed plugins here
-var BowerWebpackPlugin = require('bower-webpack-plugin');
+let BowerWebpackPlugin = require('bower-webpack-plugin');
 
 module.exports = {
   devtool: 'eval',
@@ -24,10 +28,13 @@ module.exports = {
       {
         test: /\.(js|jsx)$/,
         loader: 'babel-loader',
-        include: [
+        include: [].concat(
-          path.join(__dirname, '/../src'),
+          baseConfig.additionalPaths,
-          path.join(__dirname, '/../test')
+          [
-        ]
+            path.join(__dirname, '/../src'),
+            path.join(__dirname, '/../test')
+          ]
+        )
       }
     ]
   },