website/front/webpack.config.js at master · TMEIT/website · 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
//config for webpack + babel preprocess

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const DIST_DIR = path.resolve(__dirname, "static", "front");
const SRC_DIR = path.resolve(__dirname, "src");
const FONTSOURCE_DIR = path.resolve(__dirname, "node_modules", "@fontsource");

const PACKAGE = require("./package.json");
const version = PACKAGE.version;

module.exports = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR,
        filename: "[name]-bundle-[contenthash].js",
        chunkFilename: "[name]-chunk-[chunkhash].js",
        publicPath: "/static/front/"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                include: SRC_DIR,
                exclude: /node_modules/,
                use: { //more loaders can be added here in an array
                    loader: 'babel-loader',
                    options: {
                        presets:  [["@babel/preset-react", {"runtime": "automatic", "importSource": "@emotion/react"}]],
                        plugins: ["@emotion/babel-plugin"]
                    }
                }
            },
            {
                test: /\.css$/,
                include: [SRC_DIR, FONTSOURCE_DIR],
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(svg|png|webp)?$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 16 * 1024 // inline images smaller than 16KiB
                    }
                }
            },
        ]
    },
    plugins: [
        new BundleAnalyzerPlugin({
            analyzerMode: "static",
            reportFilename: DIST_DIR + "/report.html"
        }),
        new HtmlWebpackPlugin({
            filename: './index.html', //relative to root of the application
            favicon: "./src/favicon.png",
            hash: false,
            templateContent: `
              <!DOCTYPE html>
              <html lang="en">
                <head>
                    <title>TMEIT</title>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                </head>
                <body>
                  <div id="root"></div>
                </body>
              </html>
            `

        })
    ],
    optimization: {
//        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            maxSize: 50000, // Split chunks less than 50KB
            cacheGroups: {
                vendor: { // Label chunks with package name https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758
                    test: /[/]node_modules[/]/,
                    name(module) {
                        // get the name. E.g. node_modules/packageName/not/this/part.js
                        // or node_modules/packageName
                        const packageName = module.context.match(/[/]node_modules[/](.*?)([/]|$)/)[1];

                        // npm package names are URL-safe, but some servers don't like @ symbols
                        return `npm.${packageName.replace('@', '')}`;
                        },
                },
            },
        },
    },
};