diff --git a/README.md b/README.md index 0cb5b53..742091f 100644 --- a/README.md +++ b/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! diff --git a/cfg/base.js b/cfg/base.js index f8c4239..37e1fcc 100644 --- a/cfg/base.js +++ b/cfg/base.js @@ -1,9 +1,6 @@ 'use strict'; let path = require('path'); - -let port = 8000; -let srcPath = path.join(__dirname, '/../src'); -let publicPath = '/assets/'; +let defaultSettings = require('./defaults'); // Additional npm or bower modules to include in builds // Add all foreign plugins you may need into this array @@ -14,65 +11,32 @@ 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, - publicPath: publicPath, + port: defaultSettings.port, + publicPath: defaultSettings.publicPath, noInfo: false }, resolve: { extensions: ['', '.js', '.jsx'], alias: { - actions: srcPath + '/actions/', - components: srcPath + '/components/', - sources: srcPath + '/sources/', - stores: srcPath + '/stores/', - styles: srcPath + '/styles/', - config: srcPath + '/config/' + process.env.REACT_WEBPACK_ENV + 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 } }, - 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' - } - ] - } + module: {} }; diff --git a/cfg/defaults.js b/cfg/defaults.js new file mode 100644 index 0000000..47eb814 --- /dev/null +++ b/cfg/defaults.js @@ -0,0 +1,60 @@ +/** + * 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' + } + ] + }; +} + +module.exports = { + srcPath: srcPath, + publicPath: '/assets/', + port: dfltPort, + getDefaultModules: getDefaultModules +}; diff --git a/cfg/dev.js b/cfg/dev.js index 79524c2..efc2fcf 100644 --- a/cfg/dev.js +++ b/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/hot/only-dev-server', './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', diff --git a/cfg/dist.js b/cfg/dist.js index 116bff3..1fc19c4 100644 --- a/cfg/dist.js +++ b/cfg/dist.js @@ -2,14 +2,14 @@ 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/index'), cache: false, devtool: 'sourcemap', @@ -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', diff --git a/dist/assets/42092f929161dae9c08a21bfb46ece4d.png b/dist/assets/42092f929161dae9c08a21bfb46ece4d.png deleted file mode 100644 index 92497ad..0000000 Binary files a/dist/assets/42092f929161dae9c08a21bfb46ece4d.png and /dev/null differ diff --git a/package.json b/package.json index 7ed34c9..9552fed 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,6 @@ "karma-phantomjs-launcher": "^1.0.0", "karma-sourcemap-loader": "^0.3.5", "karma-webpack": "^1.7.0", - "lodash": "^4.0.0", "minimist": "^1.2.0", "mocha": "^2.2.5", "null-loader": "^0.1.1", diff --git a/server.js b/server.js index 3004e1c..9fd4659 100644 --- a/server.js +++ b/server.js @@ -1,12 +1,13 @@ /*eslint no-console:0 */ +'use strict'; require('core-js/fn/object/assign'); -var webpack = require('webpack'); -var WebpackDevServer = require('webpack-dev-server'); -var config = require('./webpack.config'); -var open = require('open'); +const webpack = require('webpack'); +const WebpackDevServer = require('webpack-dev-server'); +const config = require('./webpack.config'); +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); } diff --git a/src/config/base.js b/src/config/base.js index 46049ab..65b6aff 100644 --- a/src/config/base.js +++ b/src/config/base.js @@ -1,6 +1,5 @@ 'use strict'; - // Settings configured here will be merged into the final config object. export default { } diff --git a/src/config/dev.js b/src/config/dev.js index da33d9e..09f544c 100644 --- a/src/config/dev.js +++ b/src/config/dev.js @@ -2,7 +2,6 @@ import baseConfig from './base'; - let config = { appEnv: 'dev' // feel free to remove the appEnv property here }; diff --git a/src/config/dist.js b/src/config/dist.js index d944587..e9cc29d 100644 --- a/src/config/dist.js +++ b/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)); - diff --git a/src/config/test.js b/src/config/test.js index 2141398..3d17b75 100644 --- a/src/config/test.js +++ b/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)); - diff --git a/webpack.config.js b/webpack.config.js index 220f09e..7248ca2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,10 +1,10 @@ 'use strict'; -var path = require('path'); -var args = require('minimist')(process.argv.slice(2)); +const path = require('path'); +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; @@ -18,31 +18,22 @@ if(args._.length > 0 && args._.indexOf('start') !== -1) { process.env.REACT_WEBPACK_ENV = env; // Get available configurations -var configs = { +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')) }; -/** - * 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) { - var usedEnv = getValidEnv(env); - return configs[usedEnv]; +function buildConfig(wantedEnv) { + let isValid = wantedEnv && wantedEnv.length > 0 && allowedEnvs.indexOf(wantedEnv) !== -1; + let validEnv = isValid ? wantedEnv : 'dev'; + return configs[validEnv]; } module.exports = buildConfig(env);