demo/webpack.config.mjs at master · phpeso/demo · 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
import path from "node:path";
import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";
import { fileURLToPath } from "url";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const dev = process.env.DEV === '1';

export default {
    entry: {
        bundle1: './assets/scripts/bundle1.ts',
        bundle2: {
            import: './assets/scripts/bundle2.ts',
            dependOn: 'bundle1',
        },
        index: {
            import: './assets/scripts/index.ts',
            dependOn: 'bundle2',
        },
    },
    mode: dev ? 'development' : 'production',
    devtool: dev ? 'inline-source-map' : false,
    output: {
        path: path.resolve(__dirname, './html'),
        assetModuleFilename: "[name][ext]",
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: [".ts", ".tsx", ".js"],
        // Add support for TypeScripts fully qualified ESM imports.
        extensionAlias: {
            ".js": [".js", ".ts"],
            ".cjs": [".cjs", ".cts"],
            ".mjs": [".mjs", ".mts"]
        },
        plugins: [new TsconfigPathsPlugin({ configFile: "./assets/scripts/tsconfig.json" })],
    },
    module: {
        rules: [
            {
                test: /\.([cm]?ts|tsx)$/,
                use: ["ts-loader"],
            },
            {
                test: /\.css/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: dev,
                        },
                    },
                ],
            },
            {
                test: /\.(woff(2)?|eot|ttf|otf|png)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'assets/[name][ext][query]'
                }
            }
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './assets/html/index.html',
            scriptLoading: 'blocking',
            favicon: './assets/images/logo.png',
        }),
        new MiniCssExtractPlugin(),
    ],
};