Javascript 网页包代码拆分车把文件--生成大文件

我的演示应用程序有两个按钮，需要在单击时加载新的把手模板

    var $ = require('jquery');

    $(function(){
        $('.js_hbs-1').on('click', function(){
            var $button = $(this);
            var initText = $button.text();
            $button.text('Loading...');

            require.ensure([], function(){
                var template = require('handlebars!./test.hbs');
                var html1 = template({'number': 10000});

                $button.text(initText);
                $('.append-here').html(html1);
            });
        });

        $('.js_hbs-2').on('click', function(){
            var $button = $(this);
            var initText = $button.text();
            $button.text('Loading...');

            require.ensure([], function(){
                var template = require('handlebars!./test2.hbs');
                var html2 = template({'number': 20000})
                $('.append-here').html(html2);
                $button.text(initText);
            });
        });
    });

---

此处演示： 所有这些都很好，只是编译后的文件对于一行hbs文件有大约250kb

我对webpack真的很陌生，我知道有一些插件可以配置，但似乎都不起作用

我的网页包配置文件

    var webpack = require("webpack");

    module.exports = {
        context: __dirname + "/public/javascripts/",
        entry: {
            app: "./app",
        },
        output: {
            path: __dirname + "/public/javascripts/dist",
            filename: '[name].bundle.js',
            chunkFilename: "[id].bundle.js",
            publicPath: "../javascripts/dist/"
        },
        module: {
            loaders: [
                { test: /\.hbs/, loader: "handlebars-template-loader" }
            ]
        },
        devtool: "#inline-source-map"
    };

---

我认为webpack做了一些疯狂的事情，但在

供应商

条目上添加把手解决了我的问题

结果配置：

    var webpack = require("webpack");

    module.exports = {
        entry: {
            app: __dirname + "/public/javascripts/app",
            vendor: [
                'backbone',
                'handlebars'
            ],
        },
        output: {
            path: __dirname + "/public/javascripts/dist",
            filename: '[name].bundle.js',
            chunkFilename: "[id].bundle.js",
            publicPath: "../javascripts/dist/"
        },
        module: {
            loaders: [
                { test: /\.hbs/, loader: "handlebars-template-loader" }
            ]
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: Infinity
            }),
        ],
        node: {
            fs: "empty"
        },
        devtool: "#inline-source-map"
    };

---

更新 看起来前面的代码正常工作，但文件大小比添加此解决方案后大1MB：

这也解决了这些警告： ./~/handlebar/lib/index.js中的警告 网页包不支持require.extensions。改用加载器

    WARNING in ./~/handlebars/lib/index.js
    require.extensions is not supported by webpack. Use a loader instead.

    WARNING in ./~/handlebars/lib/index.js
    require.extensions is not supported by webpack. Use a loader instead.

---

---

我认为webpack做了一些疯狂的事情，但在

供应商

条目上添加把手解决了我的问题

结果配置：

    var webpack = require("webpack");

    module.exports = {
        entry: {
            app: __dirname + "/public/javascripts/app",
            vendor: [
                'backbone',
                'handlebars'
            ],
        },
        output: {
            path: __dirname + "/public/javascripts/dist",
            filename: '[name].bundle.js',
            chunkFilename: "[id].bundle.js",
            publicPath: "../javascripts/dist/"
        },
        module: {
            loaders: [
                { test: /\.hbs/, loader: "handlebars-template-loader" }
            ]
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks: Infinity
            }),
        ],
        node: {
            fs: "empty"
        },
        devtool: "#inline-source-map"
    };

---

更新 看起来前面的代码正常工作，但文件大小比添加此解决方案后大1MB：

这也解决了这些警告： ./~/handlebar/lib/index.js中的警告 网页包不支持require.extensions。改用加载器

    WARNING in ./~/handlebars/lib/index.js
    require.extensions is not supported by webpack. Use a loader instead.

    WARNING in ./~/handlebars/lib/index.js
    require.extensions is not supported by webpack. Use a loader instead.

---