Working implementation

Author: roblarsen

dist/index.html

@@ -26,7 +26,7 @@
 
   <!-- Add your site or application content here -->
   <p>Hello world! This is HTML5 Boilerplate.</p>
-  <script src="js/app.js"></script>
+  <script src="scripts/app.js"></script>
 
 </body>
 

dist/package.json

@@ -14,11 +14,13 @@
     "build": "webpack --config webpack.config.prod.js"
   },
   "devDependencies": {
-    "copy-webpack-plugin": "^11.0.0",
-    "html-webpack-plugin": "^5.6.0",
-    "webpack": "^5.91.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4",
-    "webpack-merge": "^5.10.0"
+    "copy-webpack-plugin": "^13.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.5",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.1",
+    "webpack-merge": "^6.0.1"
   }
 }

dist/js/app.js renamed to dist/scripts/app.js

@@ -0,0 +1,6 @@
+function foo(){
+    console.log("typescript");
+}
+foo();
+
+function yes(){}

dist/scripts/app.ts

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "outDir": "./dist/",
+      "noImplicitAny": true,
+      "sourceMap": true,
+      "module": "es6",
+      "target": "es6",
+      "allowJs": true,
+      "moduleResolution": "node"
+    }
+  }

dist/tsconfig.json

@@ -1,12 +1,21 @@
-const path = require('path');
-
 module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  devtool: 'inline-source-map',
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
   entry: {
-    app: './js/app.js',
+    app: './scripts/app.ts',
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    clean: true,
-    filename: './js/app.js',
+    filename: './scripts/app.js',
   },
 };

dist/webpack.common.js

@@ -13,7 +13,6 @@ module.exports = merge(common, {
       patterns: [
         { from: 'img', to: 'img' },
         { from: 'css', to: 'css' },
-        { from: 'js/vendor', to: 'js/vendor' },
         { from: 'icon.svg', to: 'icon.svg' },
         { from: 'favicon.ico', to: 'favicon.ico' },
         { from: 'robots.txt', to: 'robots.txt' },

dist/webpack.config.prod.js

@@ -120,7 +120,7 @@ gulp.task('copy:misc', () =>
 
 gulp.task('lint:js', () =>
   gulp
-    .src([`${dirs.src}/js/*.js`, `${dirs.src}/*.js`, `${dirs.test}/*.mjs`])
+    .src([`${dirs.src}/scripts/*.ts`,`${dirs.src}/scripts/*.js`, `${dirs.src}/*.js`, `${dirs.test}/*.mjs`])
     .pipe(gulpEslint())
     .pipe(gulpEslint.failOnError()),
 );

gulpfile.mjs

@@ -26,7 +26,7 @@
 
   <!-- Add your site or application content here -->
   <p>Hello world! This is HTML5 Boilerplate.</p>
-  <script src="js/app.js"></script>
+  <script src="scripts/app.js"></script>
 
 </body>
 

package-lock.json

@@ -16,6 +16,8 @@
   "devDependencies": {
     "copy-webpack-plugin": "^13.0.0",
     "html-webpack-plugin": "^5.6.3",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.3",
     "webpack": "^5.99.5",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.1",

src/index.html

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+      "outDir": "./dist/",
+      "noImplicitAny": true,
+      "sourceMap": true,
+      "module": "es6",
+      "target": "es6",
+      "allowJs": true,
+      "moduleResolution": "node"
+    }
+  }

src/js/vendor/.gitkeep

@@ -1,12 +1,21 @@
-const path = require('path');
-
 module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  devtool: 'inline-source-map',
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
   entry: {
-    app: './js/app.js',
+    app: './scripts/app.ts',
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    clean: true,
-    filename: './js/app.js',
+    filename: './scripts/app.js',
   },
 };

src/package.json

@@ -13,7 +13,6 @@ module.exports = merge(common, {
       patterns: [
         { from: 'img', to: 'img' },
         { from: 'css', to: 'css' },
-        { from: 'js/vendor', to: 'js/vendor' },
         { from: 'icon.svg', to: 'icon.svg' },
         { from: 'favicon.ico', to: 'favicon.ico' },
         { from: 'robots.txt', to: 'robots.txt' },