Implementing webpack dev server config & tasks

JedWatson · Jan 28, 2016 · 3b064c7 · 3b064c7
1 parent 6fa5627
commit 3b064c7
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 13 deletions.
diff --git a/.babelrc b/.babelrc
@@ -4,7 +4,7 @@
 		"react"
 	],
 	"env": {
-		"start": {
+		"development": {
 			"presets": [
 				"react-hmre"
 			]

diff --git a/app/components/Hello.js b/app/components/Hello.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Hello = React.createClass({
 	render () {
-		return <div><input type="text" />Hello World</div>;
+		return <div>Hello World</div>;
 	},
 });
 

diff --git a/app/css/main.css b/app/css/main.css
@@ -14,3 +14,7 @@ body {
     padding: 0px;
     width: 100%;
 }
+
+#app {
+	margin-top: 80px;
+}
diff --git a/config.js b/config.js
@@ -0,0 +1,19 @@
+const fs = require('fs');
+const path = require('path');
+const replace = require('replace');
+
+const ENV = require('./env');
+const src = (ENV === 'development' ? 'http://localhost:8080/' : '') + 'index.html';
+const config = path.resolve('./config.xml');
+
+try {
+	replace({
+		regex: /<content +src="[^"]+\" *\/>/,
+		replacement: "<content src=\""+src+"\"/>",
+		paths: [config],
+		silent: true,
+	});
+} catch (err) {
+	console.error('ERROR: Could not replace content src in: ' + config, err);
+	process.exit(1);
+}
diff --git a/config.xml b/config.xml
@@ -7,7 +7,7 @@
     <author email="support@phonegap.com" href="http://phonegap.com">
         PhoneGap Team
     </author>
-    <content src="index.html" />
+    <content src="index.html"/>
     <preference name="permissions" value="none" />
     <preference name="orientation" value="default" />
     <preference name="target-device" value="universal" />

diff --git a/env.js b/env.js
@@ -0,0 +1,13 @@
+'use strict';
+
+const TARGET = process.env.npm_lifecycle_event;
+let env = 'build';
+
+switch (TARGET) {
+	case 'start':
+	case 'ios':
+	case 'android':
+		env = 'development';
+}
+
+module.exports = env;
diff --git a/package.json b/package.json
@@ -16,12 +16,17 @@
   "devDependencies": {
     "babel-preset-react-hmre": "^1.0.1",
     "css-loader": "^0.23.1",
+    "replace": "^0.3.0",
     "style-loader": "^0.13.0",
     "webpack-merge": "^0.7.3"
   },
   "scripts": {
+	"android": "cordova run android",
     "build": "webpack",
-    "start": "webpack-dev-server",
+	"ios": "cordova run ios",
+	"prepare": "node config && webpack && cordova prepare",
+	"compile": "node config && webpack && cordova build",
+    "start": "node config && webpack-dev-server",
     "test": "echo \"No tests (yet!) -- submit a PR?\" && exit 0"
   },
   "author": "Jed Watson",

diff --git a/webpack.config.js b/webpack.config.js
@@ -2,13 +2,13 @@ const merge = require('webpack-merge');
 const path = require('path');
 const webpack = require('webpack');
 
-const TARGET = process.env.npm_lifecycle_event;
+const ENV = require('./env');
 const PATHS = {
 	app: path.join(__dirname, 'app'),
 	build: path.join(__dirname, 'www'),
 };
 
-process.env.BABEL_ENV = TARGET;
+process.env.BABEL_ENV = ENV;
 
 const common = {
 	entry: PATHS.app,
@@ -32,7 +32,7 @@ const common = {
 	}
 };
 
-if (TARGET === 'start' || !TARGET) {
+if (ENV === 'development') {
 	module.exports = merge(common, {
 		devServer: {
 			contentBase: PATHS.build,
@@ -50,14 +50,13 @@ if (TARGET === 'start' || !TARGET) {
 
 			// Parse host and port from env so this is easy to customize.
 			host: process.env.HOST,
-			port: process.env.PORT
+			port: process.env.PORT,
 		},
 		plugins: [
-			new webpack.HotModuleReplacementPlugin()
+			new webpack.HotModuleReplacementPlugin(),
 		],
 	});
-}
-
-if (TARGET === 'build') {
+} else {
+	// config can be added here for minifying / etc
 	module.exports = merge(common, {});
 }
diff --git a/www/index.html b/www/index.html
@@ -9,7 +9,7 @@
 	</head>
 	<body>
 		<div id="app"></div>
-        <script type="text/javascript" src="./cordova.js"></script>
+		<script type="text/javascript" src="./cordova.js"></script>
 		<script type="text/javascript" src="./bundle.js"></script>
 	</body>
 </html>