const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OUTPUT_DIR = 'dist';
const PreactRefreshPlugin = require('@prefresh/webpack');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const mainEntries = [path.resolve(__dirname, './src/engine/client/index.tsx')];
// Exports
module.exports = {
entry: {
editor: mainEntries,
av: path.resolve(__dirname, './src/engine/client/AV/AVIndex.tsx'),
login: path.resolve(__dirname, './src/engine/client/Login/index.tsx'),
},
devServer: {
disableHostCheck: true,
port: 9000,
hot: true,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers':
'X-Requested-With, content-type, Authorization',
},
proxy: {
'/api': 'http://localhost:1234/dimsum/api',
},
},
mode: 'development',
stats: 'errors-only',
target: 'web',
devtool: 'eval-source-map',
node: {
fs: 'empty',
},
output: {
path: path.join(__dirname, OUTPUT_DIR),
pathinfo: false,
// publicPath: '/',
publicPath: 'http://localhost:9000/',
filename: 'dimsum/static/[name].pkgd.js',
chunkFilename: 'dimsum/static/[name].pkgd.js',
jsonpFunction: 'dimsumCoreJsonpFunction',
},
resolve: {
extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.css'],
modules: [path.resolve(__dirname, 'node_modules')],
alias: {
// 'react-dom': '@hot-loader/react-dom',
react: 'preact/compat',
'react-dom/test-utils': 'preact/test-utils',
'react-dom': 'preact/compat',
},
},
optimization: {
splitChunks: {
// chunks: 'all',
cacheGroups: {
vendor: {
chunks: 'initial',
name: 'vendor',
enforce: true,
test: /node_modules/,
},
},
},
},
// optimization: {
// // removeAvailableModules: false,
// // removeEmptyChunks: false,
// splitChunks: false,
// },
module: {
rules: [
{
test: /\.worker\.ts$/,
use: [
{
loader: 'worker-loader',
options: { inline: true },
},
{
loader: 'babel-loader',
options: {
babelrc: false,
cacheDirectory: true,
presets: [
[
'@babel/env',
{
modules: false,
targets: {
browsers: ['last 2 versions'],
},
},
],
'@babel/typescript',
'@babel/react',
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-optional-chaining',
'react-refresh/babel',
],
},
},
],
},
{
test: /\.(ts|tsx)$/,
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
cacheDirectory: true,
presets: [
[
'@babel/env',
{
modules: false,
targets: {
browsers: ['last 2 versions'],
},
},
],
'@babel/typescript',
'@babel/react',
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-optional-chaining',
'transform-mui-imports',
'babel-plugin-styled-components',
'react-refresh/babel',
],
},
},
],
},
{
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(ttf|otf|woff|woff2)$/,
loader: 'file-loader',
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new PreactRefreshPlugin(),
new MonacoWebpackPlugin({
languages: ['json', 'html', 'scss'],
}),
new MiniCssExtractPlugin({
filename: 'vendor.css',
chunkFilename: '[id].css',
}),
],
};