避免使用 webpack + handlebars loader 捆绑 lib 依赖项答案

【问题标题】：Avoid bundling lib dependencies with webpack + handlebars loader避免使用 webpack + handlebars loader 捆绑 lib 依赖项
【发布时间】：2015-06-03 15:24:07
【问题描述】：

我正在使用把手模板编写一个库，我想使用 Webpack 来捆绑它。我正在使用handlebars-loader，以便我可以要求并预编译模板。

但是我不希望把手（也不是把手/运行时）包含在我的编译库中，因此，我想将它们设置为外部。

这是我的配置文件：

module.exports = {
    context: __dirname + '/src',
    entry: './index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'stuff.js',
        libraryTarget: 'umd',
        library: 'Stuff'
    },
    externals: [{
        'handlebars/runtime': {
            root: 'Handlebars',
            amd: 'handlebars.runtime',
            commonjs2: 'handlebars/runtime',
            commonjs: 'handlebars/runtime'
        }
    }],
    module: {
        loaders: [
            { test: /\.handlebars$/, loader: 'handlebars-loader' }
        ]
    }
};

不幸的是，它不起作用，handlebars-loader 仍然使handlebars/runtime 被捆绑...

我相信这是因为我不直接需要把手/运行时，而是在加载器添加的代码中需要它。

有没有办法将其标记为外部？

编辑：我知道我需要把手/运行时来编译我的模板。但是当我正在构建一个库时，我希望它由库的用户提供而不是被包含在内。这样，如果我的用户也在使用 Handlebars，则库不会加载两次。我认为图书馆避免捆绑任何依赖项是一种很好的做法（以我的拙见，这是我们经常看到的）。

【问题讨论】：

标签： javascript webpack handlebars.js loader umd

【解决方案1】：

车把装载机团队helped me solve this issue。

问题在于handlebars-loader 默认情况下使用绝对路径加载车把的运行时。但是，可以使用车把加载器的runtime 参数为车把的运行时指定不同的路径。然后可以将此路径设置为外部路径。

这是有效的：

module.exports = {
    context: __dirname + '/src',
    entry: './index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'stuff.js',
        libraryTarget: 'umd',
        library: 'Stuff'
    },
    externals: [{
        'handlebars/runtime': {
            root: 'Handlebars',
            amd: 'handlebars/runtime',
            commonjs2: 'handlebars/runtime',
            commonjs: 'handlebars/runtime'
        }
    }],
    module: {
        loaders: [
            { test: /\.handlebars$/, loader: 'handlebars-loader?runtime=handlebars/runtime' }
        ]
    }
};

【讨论】：