javascript - webpack 将多个.js文件打包成1个，体积好大！如何按需加载？

Question

我是个新手，最近开始学习webpack，看了很多介绍。
看到示例中表示，项目的多个.js最后会被打包到一个bundle.js中。
有点疑问要请教：
1.随着项目推进那bundle.js岂不是越来越大，慢慢到几M也不稀奇，那用户首次访问的时候岂不是要等页面加载好几秒？我想这种All in one的方式貌似不具备普遍适用性。

2.由此引发一些冗余加载，如下
a.html 需要 1.js 2.js
b.html 需要 1.js 3.js
c.html 需要 3.js
打包后 a, b, c.html三个文件都加载了打包后的bundle.js，而bundle.js包含的3个.js对加载它页面来说，里面包含了多余的数据。

3.有什么解决办法么，让资源安需加载？（由于我是是新手，请前辈用通俗的方式指导，或者回复相关的关键词、要点，然后我去搜索一下解决方案）。

4.感谢您的到来和指导，祝好人一生平安，愿老司机一路顺风。

Answer 1

谢谢邀请~~
bundle.js
其实不是一定的 可以通过配置指定不同的js文件 到不同的bundle.js中去 你如果真的想用webpack 我建议你还是配置一下 楼下是我配置的代码

var webpack = require('webpack');
var glob = require('glob');
var debug = true;
function getEntry() {
    var entry = {};
    glob.sync(__dirname + "/app/js/*.main.js").forEach(function (file) {
        var name = file.match(/([^/]+?)\.main\.js/)[1];
        entry[name] = __dirname + "/app/js/" + name + ".main.js";
    });
    return entry;
}
//used while add min ext
function getExt() {
    return debug ? ".min.js" : "js";
}
module.exports = {
    // context: __dirname + "/app/",
    entry: getEntry(),
    devtool: 'source-map',
    externals: {
        jquery: 'window.$'
    },
    output: {
        path: __dirname + '/build/js',
        filename: '[name].js',// + getExt(),
        sourceMapFilename: '[file].map'
    },
    module: {
        noParse: [],
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel',
        },
            {
                test:/\.less$/,
                loader:'style!css!less',
                options: {
                    modules: true,
                    localIdentName: '[path][name]__[local]--[hash:base64:5]'
                }

            }
        ]
    },
    debug: debug
};

通过配置webpack.config.js 我可以声明任意跟bundle.js有相同效果的 js文件 以.min.js命名
我的项目结构：

index.html中的引用：<script src="js/index.js"></script>
也就是每个页面用到哪个min.js
就加载哪个打包后的js

目前用的gulp打包 webpack配置react环境 如果你需要我的结构 我可以发给你