Question

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

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

当webpack与相关库捆绑在一起时，如何让materialize.js识别出这些依赖关系 - 在这种情况下#define TEST(a, b) \ { \ bool aGb = false;\ bool bGc = false;\ /* comment is here */ \ if (a > b) \ {\ ... \ }\ }？

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"
}),

这不需要额外的加载器，实际上建议在文档中使用：

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

将MaterialiseCSS与Webpack一起使用 - 无法解析模块＆＃39; hammerjs＆＃39;

2 个答案: