将 MaterializeCSS 与 Webpack 结合使用 - 无法解析模块 'hammerjs'

Question

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

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

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

Answer 1

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

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

有关详细信息，请参阅 official optimization docs。

Answer 2

为此最好使用 ProvidePlugin。

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

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

There are cases where you want a module to export itself to the global context. Don't do this unless you really need this. (Better use the ProvidePlugin) 1

将 MaterializeCSS 与 Webpack 结合使用 - 无法解析模块 'hammerjs'

Using MaterializeCSS with Webpack - Cannot resolve module 'hammerjs'

materialize

hammer.js

webpack