enable server-side source maps in dev mode!

jedwards1211 · Oct 3, 2015 · 958be22 · 958be22
1 parent 8f089fa
commit 958be22
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 23 deletions.
diff --git a/build b/build
@@ -10,6 +10,7 @@ WEBPACK_DIR=$SCRIPTPATH/webpack
 METEOR_DIR=$SCRIPTPATH/meteor_core
 
 [ -f $METEOR_DIR/client/loadClientBundle.html ] && rm $METEOR_DIR/client/loadClientBundle.html
+[ -f $METEOR_DIR/server/require-server-bundle.js ] && rm $METEOR_DIR/server/require-server-bundle.js
 
 SERVER_BUNDLE="assets/server.bundle.js"
 CLIENT_BUNDLE="assets/client.bundle.js"
@@ -20,5 +21,5 @@ env NODE_ENV=production $SCRIPTPATH/node_modules/webpack/bin/webpack.js --config
 cd $METEOR_DIR
 ln -sf $WEBPACK_DIR/$SERVER_BUNDLE server/server.bundle.js
 ln -sf $WEBPACK_DIR/$CLIENT_BUNDLE client/client.bundle.js
-rm -rvf ../dist
+rm -rf ../dist
 METEOR_SETTINGS=$(cat ../settings/prod.json) && meteor build ../dist
diff --git a/core-js-custom-build b/core-js-custom-build
@@ -18,7 +18,9 @@ then
   npm install
   cd "$SCRIPTPATH"
   npm run build-core-js
-  mv node_modules/core-js/core-js-no-number.js "$LIB_DIR/core-js-no-number-${CORE_JS_VERSION}.js"
+  cd node_modules/core-js
+  mv core-js-no-number.js "$LIB_DIR/core-js-no-number-${CORE_JS_VERSION}.js"
+  rm -rvf node_modules
   cd "$LIB_DIR"
   ln -sf core-js-no-number-${CORE_JS_VERSION}.js core-js-no-number.js
 else

diff --git a/debug b/debug
@@ -10,13 +10,14 @@ WEBPACK_DIR=$SCRIPTPATH/webpack
 METEOR_DIR=$SCRIPTPATH/meteor_core
 
 [ -f $METEOR_DIR/client/client.bundle.js ] && rm $METEOR_DIR/client/client.bundle.js
+[ -f $METEOR_DIR/server/server.bundle.js ] && rm $METEOR_DIR/server/server.bundle.js
 
 cd $WEBPACK_DIR
-rm -rvf assets
+rm -rf assets
 (
   node-inspector &
   $SCRIPTPATH/node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.config.client.dev.js --progress --colors &
-  $SCRIPTPATH/node_modules/webpack/bin/webpack.js --config webpack.config.server.js --progress --colors --watch &
+  $SCRIPTPATH/node_modules/webpack/bin/webpack.js --config webpack.config.server.dev.js --progress --colors --watch &
 
   # wait for server bundle to be output
   SERVER_BUNDLE="assets/server.bundle.js"
@@ -26,7 +27,7 @@ rm -rvf assets
   done) &&
 
   cd $METEOR_DIR
-  ln -sf $WEBPACK_DIR/$SERVER_BUNDLE server/server.bundle.js &&
+  echo "Npm.require('$WEBPACK_DIR/$SERVER_BUNDLE');" > server/require-server-bundle.js
   ln -sf $WEBPACK_DIR/loadClientBundle.html client/loadClientBundle.html &&
   export NODE_OPTIONS='--debug=5858' &&
   meteor --settings ../settings/devel.json &

diff --git a/dev b/dev
@@ -10,14 +10,13 @@ WEBPACK_DIR=$SCRIPTPATH/webpack
 METEOR_DIR=$SCRIPTPATH/meteor_core
 
 [ -f $METEOR_DIR/client/client.bundle.js ] && rm $METEOR_DIR/client/client.bundle.js
+[ -f $METEOR_DIR/server/server.bundle.js ] && rm $METEOR_DIR/server/server.bundle.js
 
 cd $WEBPACK_DIR
-rm -rvf assets
+rm -rf assets
 (
-  # the client dev config is redundantly built beforehand so there will be a copy of
-  # the react commons chunk on disk for the react-runtime fork to pick up
   $SCRIPTPATH/node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack.config.client.dev.js --progress --colors &
-  $SCRIPTPATH/node_modules/webpack/bin/webpack.js --config webpack.config.server.js --progress --colors --watch &
+  $SCRIPTPATH/node_modules/webpack/bin/webpack.js --config webpack.config.server.dev.js --progress --colors --watch &
 
   # wait for server bundle to be output
   SERVER_BUNDLE="assets/server.bundle.js"
@@ -27,7 +26,7 @@ rm -rvf assets
   done) &&
 
   cd $METEOR_DIR
-  ln -sf $WEBPACK_DIR/$SERVER_BUNDLE server/server.bundle.js &&
+  echo "Npm.require('$WEBPACK_DIR/$SERVER_BUNDLE');" > server/require-server-bundle.js
   ln -sf $WEBPACK_DIR/loadClientBundle.html client/loadClientBundle.html &&
   meteor --settings ../settings/devel.json &
 ) | cat

diff --git a/package.json b/package.json
@@ -4,12 +4,12 @@
   "description": "A port of simple-todos to Webpack/React on the frontend",
   "repository": "https://www.github.com/jedwards1211/meteor-webpack-react",
   "devDependencies": {
-    "core-js": "^1.0.0",
     "babel": "^5.8.21",
     "babel-core": "^5.8.22",
     "babel-eslint": "^4.0.5",
     "babel-loader": "^5.1.2",
     "babel-plugin-react-transform": "^1.0.5",
+    "core-js": "^1.0.0",
     "css-loader": "^0.15.3",
     "eslint-config-airbnb": "0.0.7",
     "eslint-plugin-react": "^3.2.2",
@@ -19,10 +19,11 @@
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.0",
     "redbox-react": "^1.0.1",
+    "regenerator": "^0.8.36",
+    "source-map-support": "^0.3.2",
     "style-loader": "^0.12.3",
-    "webpack-dev-server": "^1.10.1",
     "webpack": "^1.10.1",
-    "regenerator": "^0.8.36"
+    "webpack-dev-server": "^1.10.1"
   },
   "dependencies": {
     "classnames": "^2.1.3",

diff --git a/prod b/prod
@@ -10,9 +10,10 @@ WEBPACK_DIR=$SCRIPTPATH/webpack
 METEOR_DIR=$SCRIPTPATH/meteor_core
 
 [ -f $METEOR_DIR/client/loadClientBundle.html ] && rm $METEOR_DIR/client/loadClientBundle.html
+[ -f $METEOR_DIR/server/require-server-bundle.js ] && rm $METEOR_DIR/server/require-server-bundle.js
 
 cd $WEBPACK_DIR
-rm -rvf assets
+rm -rf assets
 (
   env NODE_ENV=production ../node_modules/webpack/bin/webpack.js --config webpack.config.client.prod.js --progress --colors --watch &
   env NODE_ENV=production  ../node_modules/webpack/bin/webpack.js --config webpack.config.server.prod.js --progress --colors --watch &

diff --git a/test-built b/test-built
@@ -3,7 +3,7 @@
 cd dist
 if [ ! -d bundle ]
 then
-  tar -xvf meteor_core.tar.gz
+  tar -xf meteor_core.tar.gz
   (cd bundle/programs/server && npm install)
 fi
 cd bundle

diff --git a/webpack/webpack.config.client.dev.js b/webpack/webpack.config.client.dev.js
@@ -4,10 +4,7 @@ var _ = require('lodash');
 var devProps = require('./devProps');
 
 var config = module.exports = _.assign(_.cloneDeep(config), {
-  // http://webpack.github.io/docs/build-performance.html#sourcemaps
-  devtool: 'eval',             // fastest - readable source maps
-  // devtool: 'source-map',       // slowest - best source maps
-  // devtool: 'eval-source-map',    // best of both worlds
+  devtool: 'eval',
   entry: [
     'webpack-dev-server/client?' + devProps.baseUrl,
     'webpack/hot/only-dev-server',

diff --git a/webpack/webpack.config.server.dev.js b/webpack/webpack.config.server.dev.js
@@ -0,0 +1,13 @@
+var webpack = require('webpack');
+var config = require('./webpack.config.server');
+var _ = require('lodash');
+
+var config = module.exports = _.assign(_.cloneDeep(config), {
+  devtool: 'source-map',
+  output: _.assign(_.cloneDeep(config.output), {
+    pathinfo: true,
+  }),
+  plugins: (config.plugins || []).concat([
+    new webpack.BannerPlugin('require("source-map-support/register");\n', {raw: true}),
+  ]),
+});
diff --git a/webpack/webpack.config.server.js b/webpack/webpack.config.server.js
@@ -2,10 +2,7 @@ var path = require('path');
 var webpack = require('webpack');
 
 module.exports = {
-  node: {
-    console: false,
-    process: false,
-  },
+  target: 'node',
   entry: [
     './lib/core-js-no-number',
     'regenerator/runtime',

diff --git a/webpack/webpack.config.server.prod.js b/webpack/webpack.config.server.prod.js
@@ -4,6 +4,7 @@ var _ = require('lodash');
 
 var config = module.exports = _.assign(_.cloneDeep(config), {
   plugins: (config.plugins || []).concat([
+    new webpack.BannerPlugin('var require = Npm.require;\n', {raw: true}),
     new webpack.DefinePlugin({
       'process.env': {
         NODE_ENV: JSON.stringify('production'),