feat: add webpack babel (+typescript)

Author: MikhailMasny

package.json

@@ -9,6 +9,7 @@
     "prod": "webpack --mode production",
     "watch": "webpack --mode development --watch"
   },
+  "browserslist": "> 0.25%, not dead",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/MikhailMasny/webpack-tutorials.git"
@@ -25,6 +26,11 @@
   },
   "homepage": "https://github.com/MikhailMasny/webpack-tutorials#readme",
   "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-typescript": "^7.9.0",
+    "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
@@ -40,6 +46,7 @@
     "xml-loader": "^1.2.1"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.8.7",
     "jquery": "^3.4.1",
     "normalize.css": "^8.0.1"
   }

src/javascript/babel.js

@@ -0,0 +1,11 @@
+async function start() {
+    return await Promise.resolve("async is working");
+}
+
+start().then(console.log);
+
+class Util {
+    static id = Date.now();
+}
+
+console.log("Util Id:", Util.id);

src/javascript/script.js

@@ -3,6 +3,7 @@ import json from "../assets/data.json"
 import xml from "../assets/data.xml"
 import webpackScheme from "../assets/webpack.png"
 import "../styles/style.css"
+import "./babel.js"
 
 const post = new Post("Webpack post title", webpackScheme);
 

src/javascript/analytics.js src/typescript/analytics.ts

@@ -1,7 +1,7 @@
-function createAnalytics() {
+function createAnalytics(): object {
     let counter = 0;
-    let isDestroyed = false;
-    const listener = () => counter++;
+    let isDestroyed: boolean = false;
+    const listener = (): number => counter++;
     document.addEventListener("click", listener);
 
     return {
@@ -19,4 +19,4 @@ function createAnalytics() {
     }
 }
 
-window.analytics = createAnalytics();
+window["analytics"] = createAnalytics();

webpack.config.js

@@ -27,8 +27,8 @@ module.exports = {
     context: path.resolve(__dirname, "src"),
     mode: "development",
     entry: {
-        main: "./javascript/script.js",
-        analyics: "./javascript/analytics.js"
+        main: ["@babel/polyfill", "./javascript/script.js"],
+        analytics: "./typescript/analytics.ts"
     },
     output: {
         filename: "[name].[contenthash].js",
@@ -79,6 +79,37 @@ module.exports = {
             {
                 test: /\.csv$/,
                 use: ["csv-loader"]
+            },
+            { 
+                test: /\.js$/, 
+                exclude: /node_modules/, 
+                loader: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [
+                            "@babel/preset-env"
+                        ],
+                        plugins: [
+                            "@babel/plugin-proposal-class-properties"
+                        ]
+                    }
+                }
+            },
+            { 
+                test: /\.ts$/, 
+                exclude: /node_modules/, 
+                loader: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [
+                            "@babel/preset-env",
+                            "@babel/preset-typescript"
+                        ],
+                        plugins: [
+                            "@babel/plugin-proposal-class-properties"
+                        ]
+                    }
+                }
             }
         ]
     }