test-task/webpack.config.js at master · nikas-light/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
const path = require("path");
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin");

const html = ['index']

const htmlArray = html.map(name => {
    return new HtmlWebPackPlugin({
        filename: `${name}.html`,
        template: `${__dirname}/public/${name}.html`,
        templateParameters: () => {
            return { 'foo': process.env.NODE_ENV == 'production' ? 'production' : 'dev' }
        },
        hash: true,
        inject: true,
        chunks: [name]
    })
})
module.exports = {
    devtool: 'cheap-module-source-map',
    stats: {
        all: false,
        timings: true,
        cached: true
    },
    optimization: {
        splitChunks: {
            chunks: 'async',
            minSize: 30000,
            maxSize: 0,
            minChunks: 3,
            maxAsyncRequests: 6,
            maxInitialRequests: 4,
            automaticNameDelimiter: '~',
            cacheGroups: {
                defaultVendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    },
    mode: process.env.NODE_ENV == 'production' ? 'production' : 'development',
    devServer: {
        contentBase: './public',
        hot: true,
    },
    entry: {
        index: ['webpack-hot-middleware/client', 'react-hot-loader/patch', './src/client/main']
    },
    output: {
        path: path.join(__dirname, "/dist/client"),
        filename: "[name].bundle.js",
    },
    resolve: {
        alias: {
            'react-dom': '@hot-loader/react-dom',
        },
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: [
                // 'cache-loader' ,
                {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react'],
                        plugins: ["react-hot-loader/babel"]
                    }
                },
            ]
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            use: [
                // 'cache-loader',
                {
                    loader: 'file-loader?name=./image/[hash].[ext]'
                },

            ]
        },
        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
        },
        ]
    },
    plugins: [
        // new CleanWebpackPlugin(),

        new webpack.HotModuleReplacementPlugin(),
        ...htmlArray,
    ]
}