diff --git a/.gitignore b/.gitignore
index cd965dae60d7fd314724f4bcbb56128e44db2ffe..c056e7ba1b78635a5d7f08e94ebb0f5d051f3c1e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,5 +10,4 @@ npm-*
/coverage
# Build
-/gui.js
-/playground.js
+/build
diff --git a/Makefile b/Makefile
index da69e5cd51facf1d65b48eb639fd856f453c12e2..b7f0ce59cb7a1afd11bec0a51085dd27c6c74de6 100644
--- 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
diff --git a/index.html b/index.html
deleted file mode 100644
index 4abe36c7f2b0f441c01b85f9e335d1ed23419e45..0000000000000000000000000000000000000000
--- a/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!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>
diff --git a/package.json b/package.json
index be2cd7560a05d107692fa05bf12c62ff8f8290c4..90887ace22a10f5290d48a6d5596ed647a00fb3e 100644
--- 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",
diff --git a/playground.config.js b/playground.config.js
deleted file mode 100644
index 9c7ecdfa7281520e32d2ddd8e4c95106c912156b..0000000000000000000000000000000000000000
--- a/playground.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var config = require('./webpack.config');
-module.exports = Object.assign({}, config, {
- entry: {
- playground: './src/playground.js'
- },
-});
diff --git a/src/index.js b/src/index.js
index 93f125bec6ace087afd8467f17defde7fa9f10a0..0b5b9016fa8a6c0eac9a069d98c940de881c0295 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,4 +1,8 @@
-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);
diff --git a/src/playground.js b/src/playground.js
deleted file mode 100644
index c129fda2f83db953bf6811fdce17b77047015fe1..0000000000000000000000000000000000000000
--- a/src/playground.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const React = require('react');
-const ReactDOM = require('react-dom');
-const GUI = require('.').GUI;
-
-ReactDOM.render(
- <GUI />,
- document.getElementById('app')
-);
diff --git a/webpack.config.js b/webpack.config.js
index 7f936fd56fcc3374e107eb33ed76354ee58ebae2..45f0fd4959dbb1c18d6710d387717c82afacba1e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,14 +1,20 @@
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'
+ })
+ ]
};