将 MaterializeCSS 与 Webpack 一起使用 - 无法解析模块“hammerjs”答案

【问题标题】：Using MaterializeCSS with Webpack - Cannot resolve module 'hammerjs'将 MaterializeCSS 与 Webpack 一起使用 - 无法解析模块“hammerjs”
【发布时间】：2015-05-08 22:04:10
【问题描述】：

我正在使用 webpack 构建一个项目。该项目使用materializecss。当我将materialize.js 添加到入口文件时，它会抱怨以下错误 Cannot resolve module 'hammerjs'

当我打开文件时，我可以在那里看到定义，但似乎 webpack 无法识别它。淘汰赛-es6中的weakmap也是如此。我对此的解决方案是在resolve.alias 中添加对hammer.min.js 的引用，但不确定这样做是否正确。

当webpack 与相关库捆绑在一起时，如何让webpack 识别这些依赖项——在本例中为materialize.js？

【问题讨论】：

您是否安装了hammerjs 作为项目的依赖项（即npm i hammerjs --save）？如果是的话，我认为只要在resolve.modulesDirectories 之内，Webpack 就应该能够接收到它。
@bebraw 成功了。这是否意味着我将拥有hammerjs。这是否意味着hammerjs 被加载了两次？一个来自 NPM 包，另一个嵌入 materialize.js。
我将我的评论扩展为包含一些附加信息的答案。

标签： hammer.js webpack materialize

【解决方案1】：

只要您在项目中安装了hammerjs（即npm i hammerjs --save），它就会找到它。正如@egunays 所指出的，您还应该拥有import 'expose?Hammer!hammerjs/hammer 才能访问Hammer 对象。

如果您担心可能的重复（您可以通过检查生成的捆绑包来验证这一点），您可以使用webpack.optimize.DedupePlugin。 webpack.optimize.CommonsChunkPlugin 也可以派上用场。这将允许您将应用代码与供应商捆绑包分开。

请参阅official optimization docs 了解更多信息。

【讨论】：

谢谢@bebraw。我会检查优化。
我必须添加这一行才能使其工作：import 'expose?Hammer!hammerjs/hammer;
@eguneys，谢谢！我在答案中添加了这一点。

【解决方案2】：

为此最好使用 ProvidePlugin。

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "Hammer": "hammerjs/hammer"
}),

这不需要额外的加载器，实际上是在文档中推荐的：

在某些情况下，您希望模块将自身导出到全局上下文。除非你真的需要，否则不要这样做。（最好使用ProvidePlugin）1

【讨论】：