wordpress-blocks/webpack.config.js at main · ZIORWebDev/wordpress-blocks · 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
import path from 'path';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import TerserPlugin from 'terser-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';

const isProduction = process.env.NODE_ENV === 'production';

/** @type {import('webpack').Configuration} */
export default {
	mode: isProduction ? 'production' : 'development',
	devtool: isProduction ? false : 'eval-cheap-module-source-map',

	entry: {
		'blocks/editor': './resources/editor.ts',
		'blocks/view': './resources/view.ts',
		'admin/admin': './resources/admin.ts',
	},

	output: {
		filename: '[name].min.js',
		path: path.resolve(process.cwd(), 'dist'),
		clean: true,
	},

	cache: { type: 'filesystem' },

	// WP best practice: do not bundle these; WP provides them.
	externals: {
		// React (provided by WordPress)
		react: 'React',
		'react-dom': 'ReactDOM',

		// WordPress packages
		'@wordpress/blocks': ['wp', 'blocks'],
		'@wordpress/i18n': ['wp', 'i18n'],
		'@wordpress/element': ['wp', 'element'],
		'@wordpress/components': ['wp', 'components'],
		'@wordpress/block-editor': ['wp', 'blockEditor'],
		'@wordpress/data': ['wp', 'data'],
		'@wordpress/core-data': ['wp', 'coreData'],
		'@wordpress/hooks': ['wp', 'hooks'],
		'@wordpress/api-fetch': ['wp', 'apiFetch'],
		'@wordpress/compose': ['wp', 'compose'],
		'@wordpress/blob': ['wp', 'blob'],
	},

	resolve: {
		extensions: ['.ts', '.tsx', '.js', '.jsx', '.mjs'],
	},

	module: {
		rules: [
			// Fix Webpack 5 strict ESM "fully specified" resolution inside some deps
			{
				test: /\.m?js$/,
				include: /node_modules[\\/](?:@wordpress|diff)[\\/]/,
				resolve: { fullySpecified: false },
			},

			// Supports TS/TSX + JS/JSX during migration
			{
				test: /\.[jt]sx?$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					options: {
						cacheDirectory: true,
						presets: [
							['@babel/preset-env', { targets: 'defaults' }],
							// Classic runtime avoids importing react/jsx-runtime (better for WP externals)
							['@babel/preset-react', { runtime: 'classic' }],
							['@babel/preset-typescript', { allExtensions: true, isTSX: true }],
						],
					},
				},
			},

			{
				test: /\.(sc|sa|c)ss$/,
				use: [
					MiniCssExtractPlugin.loader,
					{ loader: 'css-loader', options: { sourceMap: !isProduction } },
					{ loader: 'sass-loader', options: { sourceMap: !isProduction } },
				],
			},
		],
	},

	optimization: {
		minimizer: [
			new TerserPlugin({
				parallel: true,
				extractComments: false,
				terserOptions: {
					compress: {
						drop_console: isProduction,
						drop_debugger: isProduction,
					},
					format: { comments: false },
				},
			}),
			new CssMinimizerPlugin(),
		],
		splitChunks: false,
	},

	performance: {
		hints: 'warning',
		maxEntrypointSize: 512000,
		maxAssetSize: 1024000,
	},

	plugins: [
		new MiniCssExtractPlugin({ filename: '[name].min.css' }),

		// Type-check in a separate process (keeps builds fast)
		new ForkTsCheckerWebpackPlugin({
			typescript: {
				configFile: path.resolve(process.cwd(), 'tsconfig.json'),
			},
		}),
	],
};