flashcard-repetition-history/webpack.config.js at main · coldenate/flashcard-repetition-history · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
const { resolve } = require('path');
var glob = require('glob');
var path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ESBuildMinifyPlugin } = require('esbuild-loader');
const { ProvidePlugin, BannerPlugin } = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const CopyPlugin = require('copy-webpack-plugin');

const isProd = process.env.NODE_ENV === 'production';
const isDevelopment = !isProd;

const fastRefresh = isDevelopment ? new ReactRefreshWebpackPlugin() : null;

const SANDBOX_SUFFIX = '-sandbox';

const config = {
	mode: isProd ? 'production' : 'development',
	entry: glob.sync('./src/widgets/**.tsx').reduce(function (obj, el) {
		obj[path.parse(el).name] = el;
		obj[path.parse(el).name + SANDBOX_SUFFIX] = el;
		return obj;
	}, {}),

	output: {
		path: resolve(__dirname, 'dist'),
		filename: `[name].js`,
		publicPath: '',
	},
	resolve: {
		extensions: ['.js', '.jsx', '.ts', '.tsx'],
	},
	module: {
		rules: [
			{
				test: /\.(ts|tsx|jsx|js)?$/,
				loader: 'esbuild-loader',
				options: {
					loader: 'tsx',
					target: 'es2020',
					minify: false,
				},
			},
			{
				test: /\.css$/i,
				use: [
					isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
					{ loader: 'css-loader', options: { url: false } },
					'postcss-loader',
				],
			},
		],
	},
	plugins: [
		isDevelopment
			? undefined
			: new MiniCssExtractPlugin({
				filename: '[name].css',
			}),
		new HtmlWebpackPlugin({
			templateContent: `
      <body></body>
      <script type="text/javascript">
      const urlSearchParams = new URLSearchParams(window.location.search);
      const queryParams = Object.fromEntries(urlSearchParams.entries());
      const widgetName = queryParams["widgetName"];
      if (widgetName == undefined) {document.body.innerHTML+="Widget ID not specified."}

      const s = document.createElement('script');
      s.type = "module";
      s.src = widgetName+"${SANDBOX_SUFFIX}.js";
      document.body.appendChild(s);
      </script>
    `,
			filename: 'index.html',
			inject: false,
		}),
		new ProvidePlugin({
			React: 'react',
			reactDOM: 'react-dom',
		}),
		new BannerPlugin({
			banner: (file) => {
				return !file.chunk.name.includes(SANDBOX_SUFFIX)
					? 'const IMPORT_META=import.meta;'
					: '';
			},
			raw: true,
		}),
		new CopyPlugin({
			patterns: [
				{ from: 'public', to: '' },
				{ from: 'README.md', to: '' },
				{ from: 'src/App.css', to: '' },
				{
					from: 'src/App.css',
					to: 'snippet.css',
					noErrorOnMissing: true,
				},
			],
		}),
		fastRefresh,
	].filter(Boolean),
};

if (isProd) {
	config.optimization = {
		minimize: isProd,
		minimizer: [new ESBuildMinifyPlugin()],
	};
} else {
	// for more information, see https://webpack.js.org/configuration/dev-server
	config.devServer = {
		port: 8080,
		open: true,
		hot: true,
		compress: true,
		watchFiles: ['src/*'],
		headers: {
			'Access-Control-Allow-Origin': '*',
			'Access-Control-Allow-Headers': 'baggage, sentry-trace',
		},
	};
}

module.exports = config;