javascript - webpack 代码分割 Handlebars 文件——导致文件很大

Question

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

    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);
            });
        });
    });

<小时/>

此处演示:http://www.webpackbin.com/4krNSrrG-

所有这些都很好，只是编译后的文件有大约 250kb(对于 1 行 hbs 文件)。

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

我的 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"
    };

Answer 1

我认为 webpack 做了一些疯狂的事情，但是沿着 vendor 条目添加 Handlebars 解决了我的问题。

结果配置:

    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:https://github.com/wycats/handlebars.js/issues/953#issuecomment-94931306

这也解决了这些警告: ./~/handlebars/lib/index.js 中的警告 webpack 不支持 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.

<小时/>

    var webpack = require("webpack");
    var path = require('path');

    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",
        resolve: {
            modulesDirectories: ['node_modules', 'src'],
            fallback: path.join(__dirname, 'node_modules'),
            alias: {
                'handlebars': 'handlebars/runtime.js'
            }
        },
        resolveLoader: {
            fallback: path.join(__dirname, 'node_modules'),
            alias: {
                'hbs': 'handlebars-loader'
            }
        }
    };