Webpack從2.7.x升級到4.5.x

Question

當我將webpack從2.7.x升級到4.5.x時，main.js的捆綁大小從2.4 Mb增加到12 Mb。 不知道為什么 我已經將所有加載程序更新到最新版本-例如url-loader，css-loader，file-loader等。
這是我的配置webpack 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']
    },

Webpack 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（）我在做什么錯？

Answer 1

您甚至在生產模式下也將devtool設置為eval-source-map 。

eval-source-map-每個模塊都使用eval（）執行，並且SourceMap作為DataUrl添加到eval（）。 最初它很慢，但是重建速度很快，並且可以生成真實文件。 行號已正確映射，因為它已映射到原始代碼。 它為開發提供了最優質的SourceMaps。

它還使您的捆綁包更大。 確保您為適當的模式使用了不同的源映射。 以下是devtool值的列表： devtool配置