无法使用 webpack 导入具体化模块答案

【问题标题】：Can't import materialize modules with webpack无法使用 webpack 导入具体化模块
【发布时间】：2019-03-15 12:59:44
【问题描述】：

尝试在 webpack 中使用 materializecss。我想要做的是只导入所需的模块而不是所有的 js。加载完整的 js 按预期工作。但是如果我只想使用模态，我不知道该怎么做。我试过了

    import 'materialize-css/js/modal.js';

结果：未捕获的 ReferenceError：未定义现金然后我尝试了：

   import 'materialize-css/js/cash.js';
   import 'materialize-css/js/component.js';
   import 'materialize-css/js/global.js';
   import 'materialize-css/js/anime.min.js';
   import 'materialize-css/js/modal.js';

结果：modal.js:24 Uncaught ReferenceError: Component is not defined.

不知道有没有办法通过 webpack 以模块化的方式使用 materializecss？

提前致谢

【问题讨论】：

你可能会使用类似import { Modal } from 'materialize-css';的东西
@ChrisG：非常感谢，这确实有效，但我没有在文件大小中保存一个字节。而且我不太确定它是如何工作的。无论如何，非常感谢。
webpack 很可能不会导入整个模块，而只是导入代码中使用的内容。这可以解释为什么它对文件大小没有影响。

标签： javascript webpack ecmascript-6 import materialize

【解决方案1】：

这就是我最终做的：

import {
    Modal,
    Dropdown
} from 'materialize-css';

document.addEventListener('DOMContentLoaded', function () {
    var modals = M.Modal.init(document.querySelectorAll('.modal'), {});
    var dropdowns = M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {});
});

导入你要使用的组件并单独初始化。

【讨论】：