posts-test-task/webpack.config.js at main · JustFeitan/posts-test-task · 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
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

const mode = process.env.NODE_ENV || "development";
const devMode = mode === "development";
const target = devMode ? "web" : "browserslist";
const devtool = devMode ? "source-map" : undefined;

const plugins = devMode
    ? [new ReactRefreshWebpackPlugin()]
    : [
          new MiniCssExtractPlugin({
              filename: "index.[contenthash].css",
          }),
          new CopyPlugin({
              patterns: [
                  {
                      from: path.resolve(__dirname, "public", "_redirects"),
                      to: path.resolve(__dirname, "dist"),
                  },
              ],
          }),
      ];

module.exports = {
    mode,
    target,
    devtool,
    entry: [path.resolve(__dirname, "src", "index.tsx")],
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "index.[contenthash].js",
        clean: true,
        assetModuleFilename: "assets/[hash][ext]",
        publicPath: "/",
    },
    devServer: {
        port: 3000,
        hot: true,
        open: true,
        historyApiFallback: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "src", "index.html"),
        }),
        new CssMinimizerPlugin(),
        ...plugins,
    ],
    module: {
        rules: [
            {
                test: /\.html$/i,
                loader: "html-loader",
            },
            {
                test: /\.(c|sa|sc)ss$/i,
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader,
                    "css-loader",
                    "resolve-url-loader",
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
                type: devMode ? "asset/resource" : "asset",
            },
            {
                test: /\.tsx?$/i,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        cacheDirectory: true,
                    },
                },
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js", ".jsx"],
        alias: {
            "@components": path.resolve(__dirname, "src", "components"),
            "@hooks": path.resolve(__dirname, "src", "hooks"),
            "@models": path.resolve(__dirname, "src", "models"),
            "@store": path.resolve(__dirname, "src", "store"),
            "@helpers": path.resolve(__dirname, "src", "helpers"),
            "@services": path.resolve(__dirname, "src", "services"),
        },
    },
    optimization: {
        minimizer: [new CssMinimizerPlugin()],
    },
    performance: {
        hints: false,
    },
};