ReactJS

1
const path = require('path');
2
const {HotModuleReplacementPlugin, DefinePlugin} = require('webpack');
3
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
4

5
const NODE_ENV = process.env.NODE_ENV;
6
const IS_DEV = NODE_ENV === 'development';
7
const IS_PROD = NODE_ENV === 'production';
8
const GLOBAL_CSS_REGEXP = /\.global\.css$/;
9
const DEV_PLUGINS = [new CleanWebpackPlugin(), new HotModuleReplacementPlugin()]
10
const COMMON_PLUGINS = [ new DefinePlugin({'process.env.CLIENT_ID': `'${process.env.CLIENT_ID}'` })]
11

12
function setupDevtool() {
13
    if (IS_DEV) return 'eval';
14
    if (IS_PROD) return false;
15
}
16

17
module.exports = {
18
    mode: NODE_ENV ? NODE_ENV : 'development',
19
    resolve: {
20
        extensions: ['.jsx', '.js', '.json', '.ts','.tsx'],
21
        alias: {
22
            'react-dom': IS_DEV ? '@hot-loader/react-dom' : 'react-dom'
23
        }
24
    },
25
    entry: [
26
        path.resolve(__dirname, '../src/client/index.jsx'),
27
        'webpack-hot-middleware/client?path=http://localhost:3001/static/__webpack_hmr'
28
    ],
29
    output: {
30
        path: path.resolve(__dirname, '../dist/client'),
31
        filename: 'client.js',
32
        publicPath: "/static/"
33
    },
34
    module: {
35
        rules: [{
36
            test: /\.(js|jsx|ts|tsx)$/,
37
            exclude: /nodeModules/,
38
            use: {
39
                loader: "babel-loader",
40
                options: {
41
                    presets: ['@babel/preset-env']
42
                }
43
            }
44
        },
45
            {
46
                test: /\.css$/,
47
                use: ["style-loader", {
48
                    loader: "css-loader",
49
                    options: {
50
                        modules: {
51
                            mode: 'local',
52
                            localIdentName: '[name]__[local]--[hash:base64:5]'
53
                        }
54
                    }
55
                }],
56
                exclude: GLOBAL_CSS_REGEXP
57
            },
58
            {
59
                test: GLOBAL_CSS_REGEXP,
60
                use: ['style-loader','css-loader']
61
            }]
62
    },
63
    devtool: setupDevtool(),
64
    plugins: IS_DEV ? DEV_PLUGINS.concat(COMMON_PLUGINS) : COMMON_PLUGINS
65
};