Bundle for CDN (#5796)

* [npm] Add webpack.config.js to give UMD packaging so can be used with AMD

* [npm] Add instrs to build UMD bundle

* Add *~ to .gitignore as we don't want backup files

* [npm] Introduce umd and min build targets building to /dist

npm run build:umd && npm run build:min && cp dist/* ./targetDir

.gitignore

@@ -9,6 +9,7 @@ test/regressions/screenshots/output
 
 # Exclude compiled files
 /lib
+/dist
 icon-builder/js
 icon-builder/jsx
 
@@ -23,3 +24,4 @@ jsconfig.json
 
 # tmp
 tmp*
+*~

README.md

@@ -74,6 +74,22 @@ font in mind. So be sure to include it in your project. Here are
 [some instructions](http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500)
 on how to do so.
 
+### Packaging for use with separate React
+
+For using with React and React DOM from a CDN or as separate minified scripts, you can build
+files with UMD module support as follows:
+
+    npm install
+    npm run build:umd
+    npm run build:min
+
+This will build two archives into the /dist folder
+
+To see what's going on under the hood, you can use webpack directly:
+
+    webpack --display-reasons --display-modules --progress --optimize-minimize --colors --entry ./src/index.js
+
+
 ## Usage
 
 Beginning with v0.15.0, Material-UI components require a theme to be provided. The quickest way to get up and running is by using the `MuiThemeProvider` to inject the theme into your application context. Following that, you can to use any of the components as demonstrated in the documentation.

package.json

@@ -21,10 +21,12 @@
   },
   "homepage": "http://material-ui.com/",
   "scripts": {
-    "build": "npm run build:babel && npm run build:copy-files",
+    "build": "npm run build:babel && npm run build:copy-files && npm run build:umd && npm run build:min",
     "build:icon-index": "babel-node ./scripts/icon-index-generator.js",
     "build:babel": "babel ./src --ignore *.spec.js --out-dir ./build",
     "build:copy-files": "babel-node ./scripts/copy-files.js",
+    "build:umd": "cross-env NODE_ENV=development webpack src/index.js --output-filename material-ui.js",
+    "build:min": "cross-env NODE_ENV=production webpack -p src/index.js --output-filename material-ui.min.js",
     "build:docs": "babel-node ./scripts/build-api-docs.js",
     "clean": "npm run clean:build",
     "clean:docs": "rimraf docs/api/*",

webpack.config.js

@@ -0,0 +1,61 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+// webpack.config.js
+
+const path = require('path');
+
+const libraryName = 'material-ui';
+const outputFile = `${libraryName}.js`;
+
+const INDEX = path.join(__dirname, 'src/index.js');
+const DIST = path.join(__dirname, 'dist');
+
+const config = {
+  entry: {
+    'material-ui': INDEX,
+  },
+  devtool: 'source-map',
+  output: {
+    path: DIST,
+    filename: outputFile,
+    library: libraryName,
+    libraryTarget: 'umd',
+    umdNamedDefine: true,
+  },
+  externals: [
+    'react-addons-create-fragment',
+    'react-addons-transition-group',
+    {
+      react: {
+        root: 'React',
+        commonjs2: './react',
+        commonjs: ['./react'],
+        amd: 'react',
+      },
+    },
+    {
+      'react-dom': {
+        root: 'ReactDOM',
+        commonjs2: './react-dom',
+        commonjs: ['./react-dom'],
+        amd: 'react-dom',
+      },
+    },
+  ],
+
+  module: {
+    loaders: [
+      {
+        test: /(\.jsx|\.js)$/,
+        loader: 'babel',
+        exclude: /(node_modules)/,
+      },
+    ],
+  },
+  resolve: {
+    root: path.resolve('./src'),
+    extensions: ['', '.js'],
+  },
+};
+
+module.exports = config;
+