The playground is the product

20778d8d · Ray Schamp · 5badff99 · 20778d8d · 20778d8d · 5badff99
Commit 20778d8d authored 8 years ago by Ray Schamp
--- a/.gitignore
+++ b/.gitignore
@@ -10,5 +10,4 @@ npm-*
 /coverage

 # Build
-/gui.js
-/playground.js
+/build
--- a/Makefile
+++ b/Makefile
@@ -6,13 +6,18 @@ WEBPACK_DEV_SERVER=./node_modules/.bin/webpack-dev-server
 # ------------------------------------------------------------------------------

 build:
+	@make clean
 	$(WEBPACK) --bail

+clean:
+	rm -rf ./build
+	mkdir -p build
+
 watch:
 	$(WEBPACK) --watch

 serve:
-	$(WEBPACK_DEV_SERVER) --port 8601 --config playground.config.js
+	$(WEBPACK_DEV_SERVER) --port 8601 --content-base=./build

 # ------------------------------------------------------------------------------

@@ -24,4 +29,4 @@ test:
 	@make build
 	$(WEBPACK) --bail --config playground.config.js

-.PHONY: build watch serve lint
+.PHONY: build clean watch serve lint test
--- a/index.html
+++ b/index.html
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Scratch GUI Playground</title>
-  </head>
-  <body>
-  <div id="app"></div>
-  <script type="text/javascript" src="playground.js"></script>
-  </body>
-</html>
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
    "eslint": "3.5.0",
    "eslint-plugin-react": "6.2.1",
    "exports-loader": "0.6.3",
+    "html-webpack-plugin": "2.22.0",
    "imports-loader": "0.6.5",
    "json-loader": "0.5.4",
    "lodash.defaultsdeep": "4.4.0",

--- a/playground.config.js
+++ b/playground.config.js
-var config = require('./webpack.config');
-module.exports = Object.assign({}, config, {
-    entry: {
-        playground: './src/playground.js'
-    },
-});
--- a/src/index.js
+++ b/src/index.js
-module.exports = {
-    GUI: require('./components/gui'),
-    Blocks: require('./components/blocks')
-};
+const React = require('react');
+const ReactDOM = require('react-dom');
+const GUI = require('./components/gui');
+
+const app = document.createElement('div');
+document.body.appendChild(app);
+
+ReactDOM.render(<GUI />, app);
--- a/src/playground.js
+++ b/src/playground.js
-const React = require('react');
-const ReactDOM = require('react-dom');
-const GUI = require('.').GUI;
-
-ReactDOM.render(
-    <GUI />,
-    document.getElementById('app')
-);
--- a/webpack.config.js
+++ b/webpack.config.js
 var path = require('path');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var webpack = require('webpack');
 module.exports = {
    entry: {
+        vendor: ['react', 'react-dom'],
        gui: './src/index.js'
    },
    output: {
-        library: 'ScratchGUI',
-        path: __dirname,
+        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    },
    module: {
+        externals: {
+            React: 'react',
+            ReactDOM: 'react-dom'
+        },
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
@@ -29,5 +35,21 @@ module.exports = {
            test: require.resolve('scratch-blocks/blocks_compressed_vertical'),
            loader: 'imports?Blockly=scratch-blocks/blocks_compressed!exports?Blockly'
        }]
-    }
+    },
+    plugins: [
+        new webpack.optimize.CommonsChunkPlugin({
+            name: 'vendor',
+            filename: 'vendor.min.js'
+        }),
+        new webpack.optimize.UglifyJsPlugin({
+            include: /\.min\.js$/,
+            minimize: true,
+            compress: {
+                warnings: false
+            }
+        }),
+        new HtmlWebpackPlugin({
+            title: 'Scratch 3.0 GUI'
+        })
+    ]
 };