Update dependences and build process to inline CSS & files when running as a dev server

Author: developit

.eslintrc

@@ -1,6 +1,23 @@
 {
   "parser": "babel-eslint",
+  "extends": "eslint:recommended",
+  "env": {
+    "browser": true,
+    "mocha": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "modules": true,
+      "jsx": true
+    }
+  },
+  "globals": {},
   "rules": {
+    "no-empty": 0,
+    "no-console": 0,
+    "no-unused-vars": [0, { "varsIgnorePattern": "^h$" }],
+    "no-cond-assign": 1,
     "semi": 2,
     "camelcase": 0,
     "comma-style": 2,
@@ -13,20 +30,19 @@
     "no-implied-eval": 2,
     "no-new-func": 2,
     "guard-for-in": 2,
-    "eqeqeq": 2,
+    "eqeqeq": 1,
     "no-else-return": 2,
     "no-redeclare": 2,
     "no-dupe-keys": 2,
     "radix": 2,
     "strict": [2, "never"],
     "no-shadow": 0,
-    "callback-return": [1, ["callback", "cb", "next", "done"]],
     "no-delete-var": 2,
     "no-undef-init": 2,
     "no-shadow-restricted-names": 2,
     "handle-callback-err": 0,
     "no-lonely-if": 2,
-    "space-return-throw-case": 2,
+    "keyword-spacing": 2,
     "constructor-super": 2,
     "no-this-before-super": 2,
     "no-dupe-class-members": 2,

package.json

@@ -20,41 +20,42 @@
   "devDependencies": {
     "autoprefixer": "^6.3.3",
     "babel": "^6.5.2",
-    "babel-core": "^6.5.2",
+    "babel-core": "^6.7.2",
     "babel-eslint": "^5.0.0",
-    "babel-loader": "^6.2.3",
+    "babel-loader": "^6.2.4",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-react-jsx": "^6.5.2",
-    "babel-preset-es2015": "^6.5.0",
+    "babel-plugin-transform-react-jsx": "^6.6.5",
+    "babel-preset-es2015": "^6.6.0",
     "babel-preset-es2015-minimal": "^1.0.0",
     "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.5.2",
-    "babel-runtime": "^6.5.0",
+    "babel-register": "^6.7.2",
+    "babel-runtime": "^6.6.1",
     "chai": "^3.5.0",
-    "core-js": "^2.1.0",
+    "core-js": "^2.1.5",
     "css-loader": "^0.23.1",
-    "eslint": "^1.10.3",
+    "eslint": "^2.2.0",
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "^0.8.5",
     "html-webpack-plugin": "^1.7.0",
     "json-loader": "^0.5.4",
-    "less": "^2.6.0",
+    "less": "^2.6.1",
     "less-loader": "^2.2.2",
     "ncp": "^2.0.0",
-    "npm-run-all": "^1.5.1",
-    "postcss-loader": "^0.8.1",
+    "npm-run-all": "^1.5.3",
+    "postcss-loader": "^0.8.2",
     "raw-loader": "^0.5.1",
     "source-map-loader": "^0.1.5",
-    "superstatic": "^4.0.1",
+    "style-loader": "^0.13.0",
+    "superstatic": "^4.0.2",
     "url-loader": "^0.5.7",
     "webpack": "^1.12.13",
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
     "decko": "^1.1.3",
-    "preact": "^3.4.0",
-    "preact-compat": "^0.7.1",
-    "preact-router": "^1.2.3",
+    "preact": "^4.3.2",
+    "preact-compat": "^1.6.1",
+    "preact-router": "^1.3.0",
     "proptypes": "^0.14.3"
   }
 }

webpack.config.babel.js

@@ -3,13 +3,18 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import autoprefixer from 'autoprefixer';
 
+/*global process,module,__dirname*/
+
 const ENV = process.env.NODE_ENV || 'development';
 
+const CSS_MAPS = ENV!=='production';
+
 module.exports = {
-	entry: './src/index.js',
+	context: __dirname+'/src',
+	entry: './index.js',
 
 	output: {
-		path: './build',
+		path: __dirname+'/build',
 		publicPath: '/',
 		filename: 'bundle.js'
 	},
@@ -22,7 +27,7 @@ module.exports = {
 			'node_modules'
 		],
 		alias: {
-			components: `${__dirname}/src/components`,		// used for tests
+			components: `${__dirname}/src/components`,
 			style: `${__dirname}/src/style`,
 			'react': 'preact-compat',
 			'react-dom': 'preact-compat'
@@ -46,16 +51,16 @@ module.exports = {
 			{
 				test: /\.(less|css)$/,
 				include: /src\/components\//,
-				loader: ExtractTextPlugin.extract([
-					`css?sourceMap&modules&importLoaders=1&localIdentName=[local]${process.env.CSS_MODULES_IDENT || '_[hash:base64:5]'}`,
+				loader: ExtractTextPlugin.extract('style', [
+					`css?sourceMap=${CSS_MAPS}&modules&importLoaders=1&localIdentName=[local]${process.env.CSS_MODULES_IDENT || '_[hash:base64:5]'}`,
 					'postcss',
-					'less?sourceMap'
+					`less?sourceMap=${CSS_MAPS}`
 				].join('!'))
 			},
 			{
 				test: /\.(less|css)$/,
 				exclude: /src\/components\//,
-				loader: ExtractTextPlugin.extract('css?sourceMap!postcss!less?sourceMap')
+				loader: ExtractTextPlugin.extract('style', `css?sourceMap=${CSS_MAPS}!postcss!less?sourceMap=${CSS_MAPS}`)
 			},
 			{
 				test: /\.json$/,
@@ -66,8 +71,8 @@ module.exports = {
 				loader: 'raw'
 			},
 			{
-				test: /\.(svg|woff|ttf|eot)(\?.*)?$/i,
-				loader: 'file-loader?name=assets/fonts/[name]_[hash:base64:5].[ext]'
+				test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)(\?.*)?$/i,
+				loader: process.env.NODE_ENV==='production' ? 'file?name=[path][name]_[hash:base64:5].[ext]' : 'url'
 			}
 		]
 	},
@@ -78,10 +83,13 @@ module.exports = {
 
 	plugins: ([
 		new webpack.NoErrorsPlugin(),
-		new ExtractTextPlugin('style.css', { allChunks: true }),
+		new ExtractTextPlugin('style.css', {
+			allChunks: true,
+			disable: ENV!=='production'
+		}),
 		new webpack.optimize.DedupePlugin(),
 		new webpack.DefinePlugin({
-			'process.env.NODE_ENV': JSON.stringify(ENV)
+			'process.env': JSON.stringify({ NODE_ENV: ENV })
 		}),
 		new HtmlWebpackPlugin({
 			template: 'src/index.html',