Migrated from parcel to webpack

The whole idea of parcel was that it was configless. Now parcel 2 needs a config file. At that point, why not use webpack?
2021-10-31 20:27:50 -03:00
parent f19236e258
commit 93ec2e7fb6
6 changed files with 5313 additions and 12918 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,15 +1,24 @@
 {
  "license": "",
  "scripts": {
-    "start": "parcel serve src/index.html --open",
-    "build": "parcel build src/index.html"
+    "start": "webpack serve --mode=development",
+    "build": "run-s clean build-only",
+    "build-only": "webpack --mode=production",
+    "clean": "rimraf dist"
  },
  "dependencies": {
    "pixi.js": "^6.1.3"
  },
  "devDependencies": {
-    "parcel-bundler": "^1.12.5",
-    "parcel-plugin-static-files-copy": "^2.6.0",
-    "typescript": "^4.4.3"
+    "npm-run-all": "^4.1.5",
+    "copy-webpack-plugin": "^9.0.1",
+    "html-webpack-plugin": "^5.5.0",
+    "rimraf": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.4",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.4.4",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0"
  }
-}
+}
--- a/src/index.html
+++ b/src/index.html
@@ -22,12 +22,12 @@
 			height: 100%;
 		}
 	</style>
+
 </head>

 <body>
 	<noscript>Please enable JavaScript in your web browser to view this page.</noscript>
 	<div id="pixi-content"><canvas id="pixi-canvas" /></div>
 </body>
-<script defer src="./index.ts"></script>

 </html>
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,7 +3,7 @@ import { Application, Sprite } from 'pixi.js'
 const app = new Application({
 	view: document.getElementById("pixi-canvas") as HTMLCanvasElement,
 	resolution: window.devicePixelRatio || 1,
-	autoDensity:true,
+	autoDensity: true,
 	backgroundColor: 0x6495ed,
 	width: 640,
 	height: 480
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,30 @@
+{
+    "compilerOptions": {
+        // Settings for the compiler
+        "outDir": "./dist/",
+        "sourceMap": true,
+        "target": "es2015",
+        "module": "ESNext",
+    
+        // Rules for your code
+        "strict": true,
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noUnusedParameters": true,
+        "noUnusedLocals": true,
+        "noFallthroughCasesInSwitch": true,
+        "noImplicitOverride": true,
+
+        // Settings for linking source files
+        "moduleResolution": "node",
+        "esModuleInterop": true,
+        "resolveJsonModule": true,
+        "allowSyntheticDefaultImports": true,
+        "experimentalDecorators": true,
+
+    },
+    // Folder for your code
+    "include": [
+        "./src/**/*"
+    ]
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,84 @@
+const webpack = require('webpack');
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = (env, argv) => {
+    return ({
+        stats: 'minimal', // Keep console output easy to read.
+        entry: './src/index.ts', // Your program entry point
+
+        // Your build destination
+        output: {
+            path: path.resolve(__dirname, 'dist'),
+            filename: 'bundle.js'
+        },
+
+        // Config for your testing server
+        devServer: {
+            compress: true,
+            static: false,
+            client: {
+                logging: "warn",
+                overlay: {
+                    errors: true,
+                    warnings: false,
+                },
+                progress: true,
+            },
+            port: 1234, host: '0.0.0.0'
+        },
+
+        // Web games are bigger than pages, disable the warnings that our game is too big.
+        performance: { hints: false },
+
+        // Enable sourcemaps while debugging
+        devtool: argv.mode === 'development' ? 'eval-source-map' : undefined,
+
+        // Minify the code when making a final build
+        optimization: {
+            minimize: argv.mode === 'production',
+            minimizer: [new TerserPlugin({
+                terserOptions: {
+                    ecma: 6,
+                    compress: { drop_console: true },
+                    output: { comments: false, beautify: false },
+                },
+            })],
+        },
+
+
+        // Explain webpack how to do Typescript
+        module: {
+            rules: [
+                {
+                    test: /\.ts(x)?$/,
+                    loader: 'ts-loader',
+                    exclude: /node_modules/
+                }
+            ]
+        },
+        resolve: {
+            extensions: [
+                '.tsx',
+                '.ts',
+                '.js'
+            ]
+        },
+
+        plugins: [
+            // Copy our static assets to the final build
+            new CopyPlugin({
+                patterns: [{ from: 'static/' }],
+            }),
+
+            // Make an index.html from the template
+            new HtmlWebpackPlugin({
+                template: 'src/index.ejs',
+                hash: true,
+                minify: false
+            })
+        ]
+    });
+}