stretch_web_teleop/webpack.config.js at master · hello-robot/stretch_web_teleop · 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
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const dotenv = require("dotenv");

const pages = ["robot", "operator", "home"];

// call dotenv and it will return an Object with a parsed key
const env = dotenv.config().parsed;

// reduce it to a nice object, the same as before
const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
}, {});

module.exports = (env) => {
    envKeys["process.env.storage"] = JSON.stringify(env.storage);
    console.log(envKeys);

    return {
        mode: "development",
        entry: pages.reduce((config, page) => {
            config[page] = `./src/pages/${page}/tsx/index.tsx`;
            return config;
        }, {}),
        output: {
            filename: "[name]/bundle.js",
            path: path.resolve(__dirname, "dist"),
        },
        optimization: {
            splitChunks: {
                chunks: "all",
            },
        },
        // node: {
        //   __dirname: false,
        // },
        plugins: [
            // Work around for Buffer is undefined:
            // https://github.com/webpack/changelog-v5/issues/10
            new webpack.ProvidePlugin({
                Buffer: ["buffer", "Buffer"],
            }),
            // new webpack.ProvidePlugin({
            //   process: 'process/browser',
            // }),
            new webpack.DefinePlugin(envKeys),
        ].concat(
            pages.map(
                (page) =>
                    new HtmlWebpackPlugin({
                        inject: true,
                        template: `./src/pages/${page}/html/index.html`,
                        filename:
                            page == "home"
                                ? "index.html"
                                : `${page}/index.html`,
                        chunks: [page],
                    })
            )
        ),
        module: {
            rules: [
                {
                    test: /\.(ts)x?$/,
                    use: [
                        {
                            loader: "babel-loader",
                            options: {
                                presets: [
                                    "@babel/preset-env",
                                    [
                                        "@babel/preset-react",
                                        { runtime: "automatic" },
                                    ],
                                    "@babel/preset-typescript",
                                ],
                                plugins: ["@babel/plugin-transform-runtime"],
                            },
                        },
                    ],
                    exclude: /node_modules/,
                },
                {
                    test: /\.css$/i,
                    use: ["style-loader", "css-loader"],
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    use: "file-loader",
                },
            ],
        },
        externals: {
            express: "commonjs express",
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js"],
            alias: {
                shared: path.resolve(__dirname, "./src/shared/"),
                operator: path.resolve(__dirname, "./src/pages/operator/"),
                robot: path.resolve(__dirname, "./src/pages/robot/"),
                home: path.resolve(__dirname, "./src/pages/home/"),
            },
            fallback: {
                fs: false,
                stream: false,
                zlib: false,
            },
        },
        watch: true,
    };
};