react-webpack-template - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

cfg/base.js

 '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
@@ -17,8 +14,9 @@ // Add all foreign plugins you may need into this array
   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
   },
@@ -29,4 +27,4 @@ devServer: {
     hot: true,
-    port: port,
-    publicPath: publicPath,
+    port: defaultSettings.port,
+    publicPath: defaultSettings.publicPath,
     noInfo: false
@@ -37,45 +35,11 @@ },
     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: {}
 };

cfg/dev.js

@@ -5,5 +5,4 @@ 'use strict';
 let webpack = require('webpack');
-let _ = require('lodash');
-
 let baseConfig = require('./base');
+let defaultSettings = require('./defaults');
 
@@ -13,5 +12,5 @@ // Add needed plugins here
 
-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',
@@ -21,3 +20,3 @@ './src/index'
   cache: true,
-  devtool: 'eval',
+  devtool: 'eval-source-map',
   plugins: [
@@ -29,6 +28,7 @@ new webpack.HotModuleReplacementPlugin(),
     })
-  ]
-}, baseConfig);
+  ],
+  module: defaultSettings.getDefaultModules()
+});
 
-// Add needed loaders
+// Add needed loaders to the defaults here
 config.module.loaders.push({
@@ -35,0 +35,0 @@ test: /\.(js|jsx)$/,

cfg/dist.js

@@ -5,5 +5,5 @@ 'use strict';
 let webpack = require('webpack');
-let _ = require('lodash');
 
 let baseConfig = require('./base');
+let defaultSettings = require('./defaults');
 
@@ -13,3 +13,3 @@ // Add needed plugins here
 
-let config = _.merge({
+let config = Object.assign({}, baseConfig, {
   entry: path.join(__dirname, '../src/index'),
@@ -30,5 +30,7 @@ cache: false,
     new webpack.NoErrorsPlugin()
-  ]
-}, baseConfig);
+  ],
+  module: defaultSettings.getDefaultModules()
+});
 
+// Add needed loaders to the defaults here
 config.module.loaders.push({
@@ -35,0 +37,0 @@ test: /\.(js|jsx)$/,

CHANGELOG.md

 # react-webpack-template - Changelog
 
+## 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:
@@ -4,0 +9,0 @@

package.json

 {
   "name": "react-webpack-template",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A base skeleton template for react and webpack without task runners",
@@ -62,3 +62,2 @@ "main": "server.js",
     "karma-webpack": "^1.7.0",
-    "lodash": "^4.0.0",
     "minimist": "^1.2.0",
@@ -65,0 +64,0 @@ "mocha": "^2.2.5",

README.md

@@ -12,3 +12,3 @@ # Welcome to react-webpack-template
 - [x] Babel and JSX
-- [x] Mocha Unit tests (*optional*)
+- [x] Mocha Unit tests
 - [x] esLint Support
@@ -19,5 +19,2 @@ - [x] No dependency on grunt, gulp or the next hot taskrunner!
 
-## Todo
-- [ ] Better performance for webpack builds
-
 ## What is it for?
@@ -116,1 +113,2 @@ 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!
 - Stephan Herzog ([e-mail])
+- Kashif Iqbal Khan

server.js

 /*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) {
@@ -11,0 +12,0 @@ console.log(err);

src/config/base.js

 'use strict';
 
-
 // Settings configured here will be merged into the final config object.
 export default {
 }

src/config/dev.js

@@ -5,3 +5,2 @@ 'use strict';
 
-
 let config = {
@@ -8,0 +7,0 @@ appEnv: 'dev'  // feel free to remove the appEnv property here

src/config/dist.js

@@ -5,3 +5,2 @@ 'use strict';
 
-
 let config = {
@@ -12,2 +11,1 @@ appEnv: 'dist'  // feel free to remove the appEnv property here
 export default Object.freeze(Object.assign({}, baseConfig, config));
-

src/config/test.js

@@ -5,3 +5,2 @@ 'use strict';
 
-
 let config = {
@@ -12,2 +11,1 @@ appEnv: 'test'  // don't remove the appEnv property here
 export default Object.freeze(Object.assign(baseConfig, config));
-

webpack.config.js

 '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'];
 
@@ -21,3 +21,3 @@ // Set the correct environment
 // Get available configurations
-var configs = {
+const configs = {
   base: require(path.join(__dirname, 'cfg/base')),
@@ -30,21 +30,12 @@ dev: require(path.join(__dirname, 'cfg/dev')),
 /**
- * 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);

No alert changes

Improved metrics

Dev dependency count

35

decreased by-2.78%

Lines of code

421

increased by4.47%

Worsened metrics

Total package byte prevSize

43853

decreased by-22.21%

Number of lines in readme file

112

decreased by-1.75%

No dependency changes