Change to Webpack instead of Parcel (#2)

ChristianJHughes · Aug 22, 2018 · b426aa8 · b426aa8
1 parent fc58464
commit b426aa8
Show file tree

Hide file tree

Showing 9 changed files with 2,334 additions and 1,032 deletions.
diff --git a/bin/postbuild.js b/bin/postbuild.js
@@ -0,0 +1,42 @@
+const FILE_SYSTEM = require('fs');
+const ARCHIVER = require('archiver');
+
+const MAX_SIZE = 13 * 1024; // 13kb
+
+FILE_SYSTEM.unlinkSync('./dist/main.js');
+FILE_SYSTEM.unlinkSync('./dist/main.css');
+
+let output = FILE_SYSTEM.createWriteStream('./dist/build.zip');
+let archive = ARCHIVER('zip', {
+  zlib: { level: 9 } // set compression to best
+});
+
+output.on('close', function() {
+  const bytes = archive.pointer();
+  const percent = ((bytes / MAX_SIZE) * 100).toFixed(2);
+
+  if (bytes > MAX_SIZE) {
+    console.error(`Size overflow: ${bytes} bytes (${percent}%)`);
+  } else {
+    console.log(`Size: ${bytes} bytes (${percent}%)`);
+  }
+});
+
+archive.on('warning', function(err) {
+  if (err.code === 'ENOENT') {
+    console.warn(err);
+  } else {
+    throw err;
+  }
+});
+
+archive.on('error', function(err) {
+  throw err;
+});
+
+archive.pipe(output);
+archive.append(FILE_SYSTEM.createReadStream('./dist/index.html'), {
+  name: 'index.html'
+});
+
+archive.finalize();
diff --git a/package.json b/package.json
@@ -12,16 +12,29 @@
   ],
   "license": "MIT",
   "devDependencies": {
+    "archiver": "^2.1.1",
     "autoprefixer": "^9.1.1",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-preset-env": "^1.7.0",
+    "css-loader": "^1.0.0",
+    "html-webpack-inline-source-plugin": "^0.0.10",
+    "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "kontra": "^4.0.1",
-    "parcel-bundler": "^1.9.7",
+    "mini-css-extract-plugin": "^0.4.2",
+    "optimize-css-assets-webpack-plugin": "^5.0.0",
     "prettier": "^1.14.2",
-    "pretty-quick": "^1.6.0"
+    "pretty-quick": "^1.6.0",
+    "style-loader": "^0.22.1",
+    "webpack": "^4.17.0",
+    "webpack-cli": "^3.1.0",
+    "webpack-dev-server": "^3.1.5"
   },
   "scripts": {
-    "build": "parcel build index.html",
-    "watch": "parcel index.html",
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode=production",
+    "postbuild": "node bin/postbuild.js",
     "precommit": "pretty-quick --staged"
   },
   "prettier": {

diff --git a/index.css → src/css/index.css b/index.css → src/css/index.css
diff --git a/index.html → src/index.html b/index.html → src/index.html
@@ -11,7 +11,6 @@
 
 <body>
   <canvas width="800" height="600"></canvas>
-  <script src="src/index.js"></script>
 </body>
 
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,79 +1,2 @@
-import 'kontra/src/core';
-import 'kontra/src/sprite';
-import 'kontra/src/gameLoop';
-import 'kontra/src/pointer';
-import 'kontra/src/keyboard';
-import 'kontra/src/assets';
-import 'kontra/src/spriteSheet';
-import 'kontra/src/tileEngine';
-import text from './text/';
-
-const GAME_STATES = { playing: 0, won: 1, lost: 2 };
-let currentGameState = GAME_STATES.playing;
-let validLetters = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z'.split(
-  ','
-);
-let textAlreadyTyped = '';
-let textLeftToType = 'watermelon';
-
-let checkWin = () => {
-  if (
-    textLeftToType === textAlreadyTyped &&
-    currentGameState === GAME_STATES.playing
-  ) {
-    currentGameState = GAME_STATES.won;
-  }
-};
-
-let initKeyboardInput = () => {
-  let keyCallback = ({ key }) => {
-    let nextCharToType = textLeftToType.replace(textAlreadyTyped, '').charAt(0);
-    if (nextCharToType === key) {
-      textAlreadyTyped += key;
-      checkWin();
-    }
-  };
-  validLetters.forEach((key) => {
-    kontra.keys.bind(key, keyCallback);
-  });
-};
-
-let main = () => {
-  kontra.init();
-
-  initKeyboardInput();
-
-  let loop = kontra.gameLoop({
-    update: () => {},
-    render: () => {
-      // Game State Machine
-      switch (currentGameState) {
-        case GAME_STATES.playing:
-          text.drawText({ text: 'Type the text below to win:', x: 0, y: 25 });
-          text.drawText({ text: textLeftToType, x: 0, y: 75 });
-          text.drawText({ text: textAlreadyTyped, color: 'blue', x: 0, y: 75 });
-          break;
-        case GAME_STATES.won:
-          text.drawText({
-            text: 'You typed a word!',
-            color: 'green',
-            x: 0,
-            y: 25
-          });
-          break;
-        case GAME_STATES.lost:
-          text.drawText({
-            text: 'You lost!',
-            color: 'red',
-            x: 0,
-            y: 25
-          });
-          break;
-      }
-    }
-  });
-
-  loop.start();
-};
-
-main();
+import './js/index.js';
+import './css/index.css';
diff --git a/src/js/index.js b/src/js/index.js
@@ -0,0 +1,79 @@
+import 'kontra/src/core';
+import 'kontra/src/sprite';
+import 'kontra/src/gameLoop';
+import 'kontra/src/pointer';
+import 'kontra/src/keyboard';
+import 'kontra/src/assets';
+import 'kontra/src/spriteSheet';
+import 'kontra/src/tileEngine';
+import text from './text/';
+
+const GAME_STATES = { playing: 0, won: 1, lost: 2 };
+let currentGameState = GAME_STATES.playing;
+let validLetters = 'a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z'.split(
+  ','
+);
+let textAlreadyTyped = '';
+let textLeftToType = 'watermelon';
+
+let checkWin = () => {
+  if (
+    textLeftToType === textAlreadyTyped &&
+    currentGameState === GAME_STATES.playing
+  ) {
+    currentGameState = GAME_STATES.won;
+  }
+};
+
+let initKeyboardInput = () => {
+  let keyCallback = ({ key }) => {
+    let nextCharToType = textLeftToType.replace(textAlreadyTyped, '').charAt(0);
+    if (nextCharToType === key) {
+      textAlreadyTyped += key;
+      checkWin();
+    }
+  };
+  validLetters.forEach((key) => {
+    kontra.keys.bind(key, keyCallback);
+  });
+};
+
+let main = () => {
+  kontra.init();
+
+  initKeyboardInput();
+
+  let loop = kontra.gameLoop({
+    update: () => {},
+    render: () => {
+      // Game State Machine
+      switch (currentGameState) {
+        case GAME_STATES.playing:
+          text.drawText({ text: 'Type the text below to win:', x: 0, y: 25 });
+          text.drawText({ text: textLeftToType, x: 0, y: 75 });
+          text.drawText({ text: textAlreadyTyped, color: 'blue', x: 0, y: 75 });
+          break;
+        case GAME_STATES.won:
+          text.drawText({
+            text: 'You typed a word!',
+            color: 'green',
+            x: 0,
+            y: 25
+          });
+          break;
+        case GAME_STATES.lost:
+          text.drawText({
+            text: 'You lost!',
+            color: 'red',
+            x: 0,
+            y: 25
+          });
+          break;
+      }
+    }
+  });
+
+  loop.start();
+};
+
+main();
diff --git a/src/text/index.js → src/js/text/index.js b/src/text/index.js → src/js/text/index.js
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,52 @@
+require('webpack');
+const PATH = require('path');
+const HTML_PLUGIN = require('html-webpack-plugin');
+const MINI_CSS_EXTRACT_PLUGIN = require('mini-css-extract-plugin');
+const HTML_INLINE_SOURCE_PLUGIN = require('html-webpack-inline-source-plugin');
+const OPTIMIZE_CSS_ASSETS_PLUGIN = require('optimize-css-assets-webpack-plugin');
+const IS_PRODUCTION = process.env.npm_lifecycle_event === 'build';
+
+const APP_ENTRY = PATH.resolve('src', 'index.js');
+
+let jsRule = {
+  test: /\.js$/,
+  use: ['babel-loader']
+};
+
+let cssRule = {
+  test: /\.css$/,
+  use: [
+    MINI_CSS_EXTRACT_PLUGIN.loader,
+    {
+      loader: 'css-loader'
+    }
+  ]
+};
+
+const CONFIGURATION = {
+  entry: APP_ENTRY,
+  devtool: !IS_PRODUCTION && 'source-map',
+  module: {
+    rules: [jsRule, cssRule]
+  },
+  plugins: [
+    new HTML_PLUGIN({
+      template: 'src/index.html',
+      minify: IS_PRODUCTION && {
+        collapseWhitespace: true
+      },
+      inlineSource: IS_PRODUCTION && '.(js|css)$'
+    }),
+    new HTML_INLINE_SOURCE_PLUGIN(),
+    new OPTIMIZE_CSS_ASSETS_PLUGIN({}),
+    new MINI_CSS_EXTRACT_PLUGIN({
+      filename: '[name].css'
+    })
+  ],
+  devServer: {
+    stats: 'minimal',
+    overlay: true
+  }
+};
+
+module.exports = CONFIGURATION;
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,6 @@ @@
     <body>
       <canvas width="800" height="600"></canvas>
-      <script src="src/index.js"></script>
     </body>
     </html>