Javascript 网页包从2.7.x升级到4.5.x

当我将webpack从2.7.x升级到4.5.x main.js时，绑定大小从2.4MB增加到12MB。我不知道为什么？ 我已将所有加载程序更新为最新版本-例如，url加载程序、css加载程序、文件加载程序等。 这是我的配置 网页2.7.X

entry: {
        home: [
            'babel-polyfill',
            path.join(__dirname, 'app/home-styles.js')
        ],
        main: [
            'babel-polyfill',
            path.join(__dirname, 'app/styles.js'),
            path.join(__dirname, 'app/vendor.js'),
            path.join(__dirname, 'app/index.js')
        ]
    },
    output: {
        path: path.join(__dirname, '/dist/'),
        filename: '[name]-[hash].min.js',
        chunkFilename: 'static/react/js/[name]-[hash]-chunk.min.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'app/index.tpl.html',
            inject: 'body',
            filename: 'index.html'
        }),

        new ExtractTextPlugin({
            filename: '[name]-[hash].min.css',
            disable: false,
            allChunks: true
        }),

        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false,
                screw_ie8: true
            }
        }),

        new webpack.LoaderOptionsPlugin({
            minimize: true,
            options: {
                postcss: {
                    plugins: () =>[autoprefixer]
                }
            }
        }),

        new StatsPlugin('webpack.stats.json', {
            source: false,
            modules: false
        }),
new webpack.DefinePlugin({
            'process.env' : {
                    'NODE_ENV': JSON.stringify('production')
                }
        }),

        new webpack.optimize.CommonsChunkPlugin({
            names: ["common"],
            minChunks: 2,
            async: true
        })
    ],


    module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader'
                }
            },

            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: {
                        loader: 'css-loader',
                        options: {
                            minimize: true
                        }
                    }
                })
            },

            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: ['style-loader', 'sass-loader'],
                    use: {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[name]---[local]---[hash:base64:5]'
                        }
                    }

                })
            },

            {
                test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'static/fonts/[name].[ext]',
                        limit: 10000,
                        mimetype: 'application/font-woff'
                    }
                }
            },

            {
                test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'static/fonts/[name].[ext]'
                    }
                }
            },

            {
                test: /\.otf(\?[a-z0-9#=&.]+)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'static/fonts/[name].[ext]',
                        limit: 10000,
                        mimetype: 'application/x-opentype'
                    }
                }
            },

            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'static/images/[name].[ext]'
                    }
                }
            }
        ]
    },

    resolve: {
        modules: [
            path.join(__dirname, 'static'),
            'node_modules'
        ],
        extensions: ['*', '.json', '.js', '.jsx', '.css', '.scss']
    },

网页4.5.X

devtool: 'eval-source-map',
    entry: {
        home: [
            path.join(__dirname, 'app/home-styles.js')
        ],
        main: [
            'babel-polyfill',
            path.join(__dirname, 'app/styles.js'),
            path.join(__dirname, 'app/vendor.js'),
            path.join(__dirname, 'app/index.js')
        ]
    },
    output: {
        path: path.join(__dirname, '/dist/'),
        filename: '[name]-[hash].min.js',
        chunkFilename: 'static/react/js/[name]-[hash]-chunk.min.js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'app/index.tpl.html',
            inject: 'body',
            filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production')
            }
        }),
        new StatsPlugin('webpack.stats.json', {
            source: false,
            modules: false
        }),
        new ExtractTextPlugin({
            filename: '[name]-[hash].min.css',
            disable: false,
            allChunks: true
        }),
        new webpack.LoaderOptionsPlugin({
            minimize: true,
            options: {
                postcss: {
                    plugins: () =>[autoprefixer]
                }
            }
        })
    ],
    optimization:{
        runtimeChunk: false,
        splitChunks: {
            chunks: "async",
            minChunks: 1,
            name: true,
            cacheGroups: {
                commons: {
                    minChunks: 2
                }
            }
        },
        minimize: true
      },
      mode: 'production',
      devServer: {
        historyApiFallback: true,
        noInfo: false
      },

      module: {
        rules: [
            {
                test: /\.js?$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader'
                }
            },

            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: {
                        loader: 'css-loader',
                        options: {
                            minimize: true
                        }
                    }
                })
            },

            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: ['style-loader', 'sass-loader'],
                    use: {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[name]---[local]---[hash:base64:5]'
                        }
                    }

                })
            },

            {
                test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'static/fonts/[name].[ext]',
                        limit: 10000,
                        mimetype: 'application/font-woff'
                    }
                }
            },

            {
                test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'static/fonts/[name].[ext]'
                    }
                }
            },

            {
                test: /\.otf(\?[a-z0-9#=&.]+)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'static/fonts/[name].[ext]',
                        limit: 10000,
                        mimetype: 'application/x-opentype'
                    }
                }
            },

            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'static/images/[name].[ext]'
                    }
                }
            }
        ]
    },

    resolve: {
        modules: [
            path.join(__dirname, 'static'),
            'node_modules'
        ],
        extensions: ['*', '.json', '.js', '.jsx', '.css', '.scss']
    }

我还将System.import更改为import

---

我做错了什么

即使在生产模式下，您也将devtool设置为eval source map

eval源映射-每个模块都使用eval执行，并且一个源映射作为数据URL添加到eval中。最初它很慢，但它提供了快速的重建速度并生成真实的文件。行号已正确映射，因为它已映射到原始代码。它为开发提供了最优质的源地图

它也使你的包裹更大。 确保您正在使用不同的源映射用于相应的模式。 以下是devtool值的列表：

---

你能帮我回答这个问题吗