Add webpack for library packaging and enable multiple html

afgalvan · Mar 13, 2021 · 4a3a682 · 4a3a682
1 parent 3505842
commit 4a3a682
Show file tree

Hide file tree

Showing 18 changed files with 4,381 additions and 53 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
diff --git a/build/about.html b/build/about.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>About</title><link href="css/app.bundle.css" rel="stylesheet"></head><body><h1>About</h1><script defer="defer" src="js/about.bundle.js"></script></body></html>
diff --git a/build/css/app.bundle.css b/build/css/app.bundle.css
@@ -0,0 +1 @@
+body{margin:0;padding:0;background-color:3d3d3d}
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Index</title><script defer="defer" src="js/app.bundle.js"></script><script defer="defer" src="js/about.bundle.js"></script><link href="css/app.bundle.css" rel="stylesheet"></head><body><h1>Index</h1></body></html>
diff --git a/build/js/about.bundle.js b/build/js/about.bundle.js
diff --git a/build/js/app.bundle.js b/build/js/app.bundle.js
diff --git a/package.json b/package.json
@@ -7,20 +7,35 @@
     "@types/util.promisify": "^1.0.4"
   },
   "devDependencies": {
+    "@babel/core": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
     "@types/jest": "^26.0.20",
     "@types/node": "^14.14.17",
     "@typescript-eslint/eslint-plugin": "^4.11.1",
     "@typescript-eslint/parser": "^4.11.1",
+    "babel-loader": "^8.2.2",
+    "css-loader": "^5.1.2",
+    "css-minimizer-webpack-plugin": "^1.2.0",
     "eslint": "^7.16.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.0",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.3.1",
     "jest": "^26.6.3",
+    "mini-css-extract-plugin": "^1.3.9",
     "prettier": "^2.2.1",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
     "ts-jest": "^26.4.4",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.3",
+    "webpack": "^5.25.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "scripts": {
+    "dev": "webpack serve --open --mode=development",
+    "build": "webpack --mode=production",
     "test": "jest",
     "start": "ts-node src/index.ts"
   },

diff --git a/src/about.html b/src/about.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About</title>
+  </head>
+  <body>
+    <h1>About</h1>
+  </body>
+</html>
diff --git a/src/about.js b/src/about.js
@@ -0,0 +1,4 @@
+"use strict";
+exports.__esModule = true;
+require("./styles/main.css");
+console.log('about');
diff --git a/src/about.ts b/src/about.ts
@@ -0,0 +1,3 @@
+import './styles/main.css';
+
+console.log('about');
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Index</title>
+</head>
+<body>
+  <h1>Index</h1>
+</body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,19 @@
+"use strict";
+exports.__esModule = true;
+exports.Numbers = void 0;
+require("./styles/main.css");
+console.log('about');
+var Numbers = /** @class */ (function () {
+    function Numbers() {
+    }
+    Numbers.prototype.isOdd = function (numbers) {
+        var answer = numbers.map(function (value) {
+            if (value % 2 == 0)
+                return false;
+            return true;
+        });
+        return answer;
+    };
+    return Numbers;
+}());
+exports.Numbers = Numbers;
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,6 @@
+import './styles/main.css';
+
+console.log('about');
 export class Numbers {
   public isOdd(numbers: number[]): boolean[] {
     const answer = numbers.map((value: number) => {

diff --git a/src/styles/main.css b/src/styles/main.css
diff --git a/src/styles/main.css.map b/src/styles/main.css.map
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  padding: 0;
+  color: white;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: #3d3d3d;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,75 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  entry: {
+    app: './src/index.js',
+    about: './src/about.js'
+  },
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: 'js/[name].bundle.js',
+  },
+
+  devServer: {
+    port: 3000,
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
+      },
+      {
+        test: /\.html$/i,
+        loader: 'html-loader',
+      },
+    ],
+  },
+
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: true,
+        terserOptions: {
+          compress: true,
+        },
+      }),
+      new CssMinimizerPlugin({
+        sourceMap: true,
+      }),
+    ],
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+      minify: {
+        collapseWhitespace: true,
+        removeComments: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true,
+      },
+    }),
+    new HtmlWebpackPlugin({
+      template: './src/about.html',
+      inject: 'body',
+      chunks: ['about'],
+      filename: 'about.html',
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'css/app.bundle.css',
+    }),
+  ],
+};