2020-11-otus-spring-shurupov/23-security-authentication/webpack.dev.config.ts at master · shurupov/2020-11-otus-spring-shurupov · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// @ts-ignore
import path from "path";
// @ts-ignore
import webpack from "webpack";
// @ts-ignore
import HtmlWebpackPlugin from "html-webpack-plugin";
// @ts-ignore
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';

//import ESLintPlugin from "eslint-webpack-plugin";

const config: webpack.Configuration = {
    mode: "development",
    output: {
        publicPath: "/",
    },
    entry: "./src/ui/index.tsx",
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/i,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react",
                            "@babel/preset-typescript",
                        ],
                    },
                },
            },
            {
                // For pure CSS - /\.css$/i,
                // For Sass/SCSS - /\.((c|sa|sc)ss)$/i,
                // For Less - /\.((c|le)ss)$/i,
                test: /\.((c|sa|sc)ss)$/i,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                    },
                ],
            },
            // For webpack v5
            {
                test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
                // More information here https://webpack.js.org/guides/asset-modules/
                type: "asset",
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
        alias: {
            components: path.resolve(__dirname, "src/ui/components"),
            store: path.resolve(__dirname, "src/ui/store"),
            smart: path.resolve(__dirname, "src/ui/smart"),
        },
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/ui/index.html",
        }),
        new webpack.HotModuleReplacementPlugin(),
        new ForkTsCheckerWebpackPlugin({
            async: false
        }),
        /*new ESLintPlugin({
            extensions: ["js", "jsx", "ts", "tsx"],
        }),*/
    ],
    devtool: "inline-source-map",
    devServer: {
        contentBase: path.join(__dirname, "build"),
        historyApiFallback: true,
        port: 4000,
        open: true,
        hot: true,
        before: (app) => {
            app.get('/api/genres', (req, res) => res.send([
                {
                    id: 1,
                    name: 'Horror',
                },
                {
                    id: 2,
                    name: 'Drama',
                }
            ]));
            app.get('/api/authors', (req, res) => res.send([
                {
                    id: 1,
                    firstName: 'Alexander',
                    lastName: 'Pushkin',
                    name: 'Alexander Pushkin',
                },
                {
                    id: 2,
                    name: 'Fedor Dostoevsky',
                    firstName: 'Fedor',
                    lastName: 'Dostoevsky',
                }
            ]));
            app.get('/api/books', (req, res) => res.send([
                {
                    id: 1,
                    name: 'The Tale about Fisherman and a Gold Fish',
                    genres: "Fairy Tale, Drama",
                    author: "Alexander Pushkin"
                },
                {
                    id: 2,
                    name: 'Player',
                    genres: "Drama",
                    author: "Fedor Dostoyevsky"
                }
            ]));
            app.get('/api/books/1', (req, res) => res.send({
                id: '1',
                name: 'The Tale about Fisherman and a Gold Fish',
                genres: [1,2,3],
                authorId: 1
            }));
        }
    },
};

export default config;