将MaterialiseCSS与Webpack一起使用 - 无法解析模块'hammerjs'

Question

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

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

如何webpack将这些依赖项与相关库捆绑在一起时识别这些依赖项 - 在这种情况下materialize.js？

Answer 1

只要你已经hammerjs安装到你的项目(即.npm i hammerjs --save),它应该找到它.正如@egunays所指出的,您还必须import 'expose?Hammer!hammerjs/hammer访问Hammer对象.

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

有关详细信息,请参阅官方优化文档.

Answer 2

为此,最好使用ProvidePlugin.

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

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

在某些情况下,您希望模块将自身导出到全局上下文.除非你真的需要,否则不要这样做.(更好地使用ProvidePlugin)1