package.json

@@ -4,7 +4,7 @@
   "description": "These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. For deployment, see the nix-scripts repository. Commits to https://git.m-labs.hk/M-Labs/web2019.git are automatically deployed to m-labs.hk through Hydra.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "./node_modules/.bin/babel static/js/shop.jsx --watch -o static/js/shop.min.js",
+    "start": "./node_modules/.bin/babel static/js/shop.jsx --watch -o static/js/shop_bundle.js",
     "build": "./node_modules/.bin/babel static/js/shop.jsx -o static/js/shop.min.js"
   },
   "repository": {
@@ -16,7 +16,12 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",
-    "babel-preset-minify": "^0.5.1"
+    "babel-loader": "^9.1.2",
+    "babel-preset-minify": "^0.5.1",
+    "webpack": "^5.88.0",
+    "webpack-cli": "^5.1.4",
+    "bootstrap": "^4.3.1",
+    "react-bootstrap": "^1.6.7"
   },
   "babel": {
     "presets": [

templates/page-place-order.html

@@ -74,6 +74,7 @@
 
   <!-- Load our React component. -->
   <!-- <script type="text/babel" src="{{ get_url(path='js/shop.jsx', cachebust=true) }}"></script> -->
-  <script src="{{ get_url(path='js/shop.min.js', cachebust=true) }}"></script>
+  <!-- <script src="{{ get_url(path='js/shop.min.js', cachebust=true) }}"></script> -->
+  <script src="{{ get_url(path='js/shop_bundle.js', cachebust=true) }}"></script>
 
 {% endblock %}

webpack.config.js

@@ -0,0 +1,19 @@
+const path = require('path');
+
+module.exports = {
+    entry: './static/js/shop.min.js', // change this to your entry point
+    output: {
+        path: path.resolve(__dirname, './static/js'), // change this to your output path
+        filename: 'shop_bundle.js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: 'babel-loader'
+            }
+        ]
+    },
+    devtool: 'source-map' // optional
+};