FluidFramework/examples/data-objects/text-editor/webpack.config.cjs at main · kian-thompson/FluidFramework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
/*!
 * Copyright (c) Microsoft Corporation and contributors. All rights reserved.
 * Licensed under the MIT License.
 */

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = (env = {}) => {
	const { production } = env;

	return {
		entry: {
			app: "./src/app.tsx",
		},
		resolve: {
			extensions: [".ts", ".tsx", ".js"],
			extensionAlias: {
				".js": [".ts", ".tsx", ".js"],
				".cjs": [".cts", ".cjs"],
				".mjs": [".mts", ".mjs"],
			},
		},
		module: {
			rules: [
				{
					test: /\.tsx?$/,
					loader: "ts-loader",
				},
				{
					test: /\.[cm]?js$/,
					use: [require.resolve("source-map-loader")],
					enforce: "pre",
				},
				{
					test: /\.css$/,
					use: ["style-loader", "css-loader"],
				},
			],
		},
		output: {
			filename: "[name].bundle.js",
			path: path.resolve(__dirname, "dist"),
		},
		plugins: [
			new HtmlWebpackPlugin({
				title: "Multi-View Text Editor",
				templateContent: `
					<!DOCTYPE html>
					<html><head><meta charset="utf-8"><title>Multi-View Text Editor</title>
					<style>*{box-sizing:border-box}body{margin:0;font-family:sans-serif}#content{height:100vh}</style>
					</head><body><div id="content">Loading...</div></body></html>
				`,
			}),
		],
		devServer: {
			static: {
				directory: path.join(__dirname, "dist"),
			},
			open: true,
		},
		watchOptions: {
			ignored: "**/node_modules/**",
		},
		mode: production ? "production" : "development",
		devtool: production ? "source-map" : "inline-source-map",
		performance: {
			maxAssetSize: 2_000_000, // 2MB
			maxEntrypointSize: 2_000_000, // 2MB
		},
	};
};