使用Webpack和MaterializeCSS - 无法解析模块'hammerjs'。

Question

我正在使用webpack构建一个项目。该项目使用materializecss。当我将materialize.js添加到入口文件时，它会报以下错误：无法解析模块“hammerjs”。

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

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

- ritcoder

---

你的项目中是否已经安装了 hammerjs 依赖（例如 npm i hammerjs --save）？如果是的话，我认为只要它在 resolve.modulesDirectories 中，Webpack 应该能够识别它。 - Juho Vepsäläinen

@bebraw 它起作用了。这难道不意味着我将拥有 hammerjs 吗？这是否意味着 hammerjs 被加载了两次？一次来自 NPM 包，另一次嵌入在 materialize.js 中。 - ritcoder

我将我的评论扩展为一个答案，并添加了一些额外的信息。 - Juho Vepsäläinen

Answer 1

只要你已经将hammerjs安装到你的项目中（例如npm i hammerjs --save），它就可以找到它。正如@egunays所指出的那样，你还应该使用import 'expose?Hammer!hammerjs/hammer'来访问Hammer对象。

如果你担心可能会出现重复（你可以通过检查生成的捆绑包来验证这一点），你可以使用webpack.optimize.DedupePlugin。同时，webpack.optimize.CommonsChunkPlugin也很方便。这将允许你将你的应用程序代码与供应商捆绑包分开。

有关更多信息，请参见官方优化文档。

- Juho Vepsäläinen

---

谢谢@bebraw。我会检查优化。 - ritcoder

我不得不添加这行代码才能使它工作：import 'expose?Hammer!hammerjs/hammer。 - eguneys

@eguneys，谢谢！我已经将那一部分添加到答案中了。 - Juho Vepsäläinen

Answer 2

使用ProvidePlugin更好。

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

这不需要额外的加载器，实际上文档中也推荐使用:

有些情况下，您希望将一个模块导出到全局上下文中。除非您确实需要这样做，否则不要这样做。（最好使用ProvidePlugin）1

- Austin Pray