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

const path = require('path');


const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


const pages = [
    {
        name: 'home',
        entry: './src/pages/home/index.js', 
        template: './src/pages/home/index.html', 
        title: '首页',
        chunks: ['home', 'vendor', 'common'] 
    },
    {
        name: 'about',
        entry: './src/pages/about/index.js',
        template: './src/pages/about/index.html',
        title: '关于我们',
        chunks: ['about', 'vendor', 'common']
    },
    {
        name: 'contact',
        entry: './src/pages/contact/index.js',
        template: './src/pages/contact/index.html',
        title: '联系我们',
        chunks: ['contact', 'vendor', 'common']
    }
]

module.exports = {
    mode: 'development', 
    entry: pages.reduce((acc, page) => {
        acc[page.name] = page.entry;
        return acc;
    }, {}),
    output: {
        path: path.resolve(__dirname, 'dist'), 
        filename: 'js/[name].[contenthash].js', 
        clean: true 
    },
    
    
    
    externals: {
        'react': 'React',
    },
    optimization: {
        splitChunks: {
            
            
            chunks: 'all', 
            minSize: 30000, 
            maxSize: 0,     
            minChunks: 1,   
            maxAsyncRequests: 30, 
            maxInitialRequests: 30, 
            automaticNameDelimiter: '~', 
            cacheGroups: {      
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    priority: -10, 
                },
                common: {
                    test: /[\\/]src[\\/]components[\\/]/,
                    name: 'common',
                    minChunks: 2, 
                },
               
                default: {
                    reuseExistingChunk: true, 
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.ts?$/,
                exclude: /node_modules/,
                use: 'ts-loader'
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
          
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name].[conntenthash].css'
        }),
        
        ...pages.map(page => new HtmlWebpackPlugin({
            template: path.resolve(__dirname, page.template),
            filename: `${page.filename}.html`,
             
             
            chunks: page.chunks,   
            title: page.title,  
            inject: 'body', 
            scriptLoading: 'defer', 
            env: {
                APP_ENV: process.env.APP_ENV, 
            },
            minify: {
                removeComments: true,   
                collapseWhitespace: true, 
                removeRedundantAttributes: true, 
                minifyCSS: true, 
                minifyJS: true, 
            }
        }))
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true, 
        port: 9000, 
        hot: true, 
        open: true, 
    }

}