Add support for Webpack 2's tree-shaking (vercel#926)

* Let webpack2 to handle ES2015 module system
Since Node.js can't do that, we need to transpile
ES2015 module system in the emit-file-loader.

* Use sourceMaps only in dev.

* Introduce a transform option to emit-file-loader
So, we can move our ES2015 transpile code with that option.

* Remove unwanted argument options.

* Update comments.

* Use dev flag instead of NODE_ENV

server/build/babel/preset.js

@@ -3,7 +3,7 @@ const babelRuntimePath = require.resolve('babel-runtime/package')
 
 module.exports = {
   presets: [
-    require.resolve('babel-preset-es2015'),
+    [require.resolve('babel-preset-es2015'), { modules: false }],
     require.resolve('babel-preset-react')
   ],
   plugins: [

server/build/loaders/emit-file-loader.js

@@ -10,7 +10,15 @@ module.exports = function (content, sourceMap) {
   const opts = { context, content, regExp }
   const interpolatedName = loaderUtils.interpolateName(this, name, opts)
 
-  this.emitFile(interpolatedName, content, sourceMap)
+  const emit = (code, map) => {
+    this.emitFile(interpolatedName, code, map)
+    this.callback(null, code, map)
+  }
 
-  this.callback(null, content, sourceMap)
+  if (query.transform) {
+    const transformed = query.transform({ content, sourceMap })
+    return emit(transformed.content, transformed.sourceMap)
+  }
+
+  return emit(content, sourceMap)
 }

server/build/webpack.js

@@ -10,6 +10,7 @@ import UnlinkFilePlugin from './plugins/unlink-file-plugin'
 import WatchPagesPlugin from './plugins/watch-pages-plugin'
 import JsonPagesPlugin from './plugins/json-pages-plugin'
 import getConfig from '../config'
+import * as babelCore from 'babel-core'
 
 const documentPage = join('pages', '_document.js')
 const defaultPages = [
@@ -144,7 +145,22 @@ export default async function createCompiler (dir, { dev = false, quiet = false
       return /node_modules/.test(str) && str.indexOf(nextPagesDir) !== 0
     },
     options: {
-      name: 'dist/[path][name].[ext]'
+      name: 'dist/[path][name].[ext]',
+      // By default, our babel config does not transpile ES2015 module syntax because
+      // webpack knows how to handle them. (That's how it can do tree-shaking)
+      // But Node.js doesn't know how to handle them. So, we have to transpile them here.
+      transform ({ content, sourceMap }) {
+        const transpiled = babelCore.transform(content, {
+          presets: ['es2015'],
+          sourceMaps: dev ? 'both' : false,
+          inputSourceMap: sourceMap
+        })
+
+        return {
+          content: transpiled.code,
+          sourceMap: transpiled.map
+        }
+      }
     }
   }, {
     loader: 'babel-loader',