diff --git a/CHANGELOG.md b/CHANGELOG.md index edc85f6..ffd4cf1 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/README.md b/README.md index 4952965..0cb5b53 100644 --- a/README.md +++ b/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: diff --git a/cfg/base.js b/cfg/base.js index 5b21a32..f8c4239 100644 --- a/cfg/base.js +++ b/cfg/base.js @@ -1,10 +1,19 @@ -var path = require('path'); +'use strict'; +let path = require('path'); -var port = 8000; -var srcPath = path.join(__dirname, '/../src'); -var publicPath = '/assets/'; +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 +// @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: { diff --git a/cfg/dev.js b/cfg/dev.js index e9ef819..af5c4ba 100644 --- a/cfg/dev.js +++ b/cfg/dev.js @@ -1,13 +1,15 @@ -var path = require('path'); -var webpack = require('webpack'); -var _ = require('lodash'); +'use strict'; -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; diff --git a/cfg/dist.js b/cfg/dist.js index 23fccf2..edb288c 100644 --- a/cfg/dist.js +++ b/cfg/dist.js @@ -1,13 +1,15 @@ -var path = require('path'); -var webpack = require('webpack'); -var _ = require('lodash'); +'use strict'; -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; diff --git a/cfg/test.js b/cfg/test.js index b8540ce..f139c49 100644 --- a/cfg/test.js +++ b/cfg/test.js @@ -1,8 +1,12 @@ -var path = require('path'); -var srcPath = path.join(__dirname, '/../src/'); +'use strict'; + +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: [ - path.join(__dirname, '/../src'), - path.join(__dirname, '/../test') - ] + include: [].concat( + baseConfig.additionalPaths, + [ + path.join(__dirname, '/../src'), + path.join(__dirname, '/../test') + ] + ) } ] },