webpack.common.config.js

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

module.exports = {
	entry: [ './src' ],

	resolve: {
		extensions: [ '.js', '.jsx' ],
		modules: [ 'node_modules', 'src' ],
		alias: {
			'react': 'preact-compat',
			'react-dom': 'preact-compat'
		}
	},

	performance: { hints: false },

	output: {
		filename: '[name].[hash].bundle.js',
		chunkFilename: '[name].[chunkhash].chunk.js',
		path: path.join(__dirname, 'dist'),
		publicPath: '/'
	},

	externals: {
		jquery: 'jQuery'
	},

	module: {
		rules: [
			{
				test: /\.jsx?$/,
				loader: 'babel-loader',
				options: {
					presets: [
						[
							'@babel/env',
							{
								useBuiltIns: 'entry',
								corejs: 3
							}
						]
					],
					plugins: [
						[ '@babel/plugin-transform-react-jsx', { pragma: 'h' } ],
						[ '@babel/plugin-proposal-decorators', { legacy: true } ],
						'@babel/plugin-syntax-dynamic-import',
						'@babel/plugin-proposal-class-properties'
					]
				}
			},
			{
				test: /\.s?css$/,
				use: [
					'style-loader',
					'css-loader',
					'postcss-loader',
					'sass-loader'
				]
			},
			{
				test: /\.html$/,
				use: [{
					loader: 'file-loader',
					options: { name: '[name].[ext]' }
				}]
			}
		]
	},

	plugins: [
		new HtmlWebpackPlugin({
			template: path.join(__dirname, 'src/index.htm')
		})
	]
};