add support for webpack2

.env.example

@@ -1,2 +0,0 @@
-AUTH0_CLIENT_ID='BUIJSW9x60sIHBw8Kd9EmCbj8eDIFxDC'
-AUTH0_DOMAIN='samples.auth0.com'

.gitignore

@@ -2,5 +2,6 @@
 /dist/
 /dev_content/
 /index.html
+.vscode/
 deldist.bat
 .env

README.md

@@ -1,3 +1,7 @@
 # Kana Quiz 2
 Kana Quiz remade with React.js.
 See live at http://simplemedia.org/kana/
+
+`npm install`
+Development: `npm start`
+Production: `npm run build`

package.json

@@ -20,21 +20,21 @@
   "homepage": "https://github.com/anzzstuff/kanaquiz#readme",
   "devDependencies": {
     "autoprefixer": "^6.3.7",
+    "babel-core": "^6.24.0",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.11.1",
-    "css-loader": "^0.23.1",
+    "css-loader": "^0.27.3",
-    "dotenv": "^2.0.0",
+    "file-loader": "^0.10.1",
-    "file-loader": "^0.9.0",
     "html-webpack-plugin": "^2.22.0",
     "postcss": "^5.0.21",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^1.3.3",
     "precss": "^1.4.0",
     "react-hot-loader": "^1.3.0",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.14.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.1",
+    "webpack": "^2.2.1",
-    "webpack-dev-server": "^1.14.1"
+    "webpack-dev-server": "^2.4.2"
   },
   "dependencies": {
     "postcss": "^5.1.0",

webpack.config.js

@@ -1,6 +1,3 @@
-const NODE_ENV = 'development';
-const dotenv = require('dotenv');
-
 const webpack = require('webpack');
 const fs = require('fs');
 const path = require('path');
@@ -8,19 +5,6 @@ const autoprefixer = require('autoprefixer');
 const precss = require('precss');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 
-const dotEnvVars = dotenv.config();
-const envVariables =
-    Object.assign({}, dotEnvVars);
-const defines =
-  Object.keys(envVariables)
-  .reduce((memo, key) => {
-    const val = JSON.stringify(envVariables[key]);
-    memo[`__${key.toUpperCase()}__`] = val;
-    return memo;
-  }, {
-    __NODE_ENV__: JSON.stringify(NODE_ENV)
-  });
-
 module.exports = {
     entry: [
         'webpack-dev-server/client?http://localhost:8080',
@@ -33,41 +17,41 @@ module.exports = {
         filename: 'bundle.js'
     },
     resolve: {
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
     },
     plugins: [
         new HtmlWebPackPlugin({
             template: 'src/index.html',
-            filename: '../index.html'
+            filename: './index.html'
         }),
         new webpack.HotModuleReplacementPlugin(),
-        new webpack.NoErrorsPlugin(),
+        new webpack.LoaderOptionsPlugin({
-        new webpack.DefinePlugin(defines)
+            options: {
+                postcss: function() {
+                    return [autoprefixer, precss];
+                }
+            }
+        })
     ],
     module: {
         loaders: [
             {
                 test: /\.jsx?$/,
                 exclude: /node_modules/,
-                loaders: ['react-hot', 'babel']
+                loaders: ['react-hot-loader', 'babel-loader']
             }, {
                 test: /\.scss$/,
                 loaders: ['style-loader', 'css-loader', 'postcss-loader']
             }, {
                 test: /\.css$/,
                 loaders: ['style-loader', 'css-loader']
-            },
+            }, {
-            {
                 test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/,
                 loader: 'url-loader?limit=25000'
-            },
+            }, {
-            {
                 test: /\.(eot|ttf)$/,
                 loader: 'file-loader'
             }
         ]
-    },
-    postcss: function() {
-        return [autoprefixer, precss];
     }
 };

webpack.config.prod.js

@@ -1,6 +1,3 @@
-const NODE_ENV = 'production';
-const dotenv = require('dotenv');
-
 const webpack = require('webpack');
 const fs = require('fs');
 const path = require('path');
@@ -8,19 +5,6 @@ const autoprefixer = require('autoprefixer');
 const precss = require('precss');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 
-const dotEnvVars = dotenv.config();
-const envVariables =
-    Object.assign({}, dotEnvVars);
-const defines =
-  Object.keys(envVariables)
-  .reduce((memo, key) => {
-    const val = JSON.stringify(envVariables[key]);
-    memo[`__${key.toUpperCase()}__`] = val;
-    return memo;
-  }, {
-    __NODE_ENV__: JSON.stringify(NODE_ENV)
-  });
-
 module.exports = {
     devtool: 'cheap-module-source-map',
     entry: [
@@ -32,52 +16,47 @@ module.exports = {
         filename: 'bundle.js'
     },
     resolve: {
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
     },
     plugins: [
-        new webpack.DefinePlugin({
-            'process.env':{
-            'NODE_ENV': JSON.stringify('production')
-            }
-        }),
         new HtmlWebPackPlugin({
             template: 'src/index.html',
             filename: '../index.html'
         }),
-        new webpack.optimize.DedupePlugin(),
-        new webpack.optimize.OccurenceOrderPlugin(),
         new webpack.optimize.UglifyJsPlugin({
+            sourceMap: true,
             compress:{
                 warnings: false
             },
         }),
-        new webpack.NoErrorsPlugin(),
+        new webpack.NoEmitOnErrorsPlugin(),
-        new webpack.DefinePlugin(defines)        
+        new webpack.LoaderOptionsPlugin({
+            options: {
+                postcss: function() {
+                    return [autoprefixer, precss];
+                }
+            }
+        })        
     ],
     module: {
         loaders: [
             {
                 test: /\.jsx?$/,
                 exclude: /node_modules/,
-                loaders: ['babel']
+                loaders: ['babel-loader']
             }, {
                 test: /\.scss$/,
                 loaders: ['style-loader', 'css-loader', 'postcss-loader']
             }, {
                 test: /\.css$/,
                 loaders: ['style-loader', 'css-loader']
-            },
+            }, {
-            {
                 test: /\.(png|jpg|svg|woff|woff2)?(\?v=\d+.\d+.\d+)?$/, 
                 loader: 'url-loader?limit=8192'
-            },
+            }, {
-            {
                 test: /\.(eot|ttf)$/, 
                 loader: 'file-loader'
             }            
         ]
-    },
-    postcss: function() {
-        return [autoprefixer, precss];
     }
 };