materialize-css 和 Webpack 的问题，忽略大小写时具有相同名称的模块，JQuery

Question

我有一个基本的单页 React/Redux 应用程序，我正在使用 Webpack 捆绑它，除了当我尝试加载 materialise-css js 文件时出现以下错误外，一切正常。我试过从 NPM 模块加载和编译源，错误是一样的。

WARNING in ./~/jQuery/dist/jquery.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in ./~/jquery/dist/jquery.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

我正在将所有内容加载到我的条目文件的顶部，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';

import App from './components/app'
import reducers from './reducers'

require('../materialize/css/materialize.css');
require('../materialize/js/materialize.js');
require("../style/main.scss");

和 JQuery 从 NPM 模块加载如下：

new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
})

现在一切仍然有效，它加载了所有字体、js 文件以及应用程序中所有 works/looks 正确的东西，但是警告是有原因的，所以我真的很想让它消失！

如果您需要更多信息，请告诉我。

您可以在此处查看完整的源代码https://github.com/gazzer82/freeCodeCamp_Recipes

谢谢

Answer 1

好的，所以我通过在 materialize.js

中更改它来解决这个问题

jQuery = $ = require('jQuery');

对此

jQuery = $ = require('jquery');

简单。 . . .

Answer 2

幸好不用改materialize.js :-)

在 webpack 配置中添加：

module.exports = {
  // ...
  resolve: {
      alias: {
        jQuery: "path/to/jquery/dist/jquery"
      }
  }
  // ...
};

此处有更多详细信息：https://github.com/Dogfalo/materialize/issues/2690

materialize-css 和 Webpack 的问题，忽略大小写时具有相同名称的模块，JQuery

Issue with materialize-css and Webpack, module with an equal name when case is ignored, JQuery

jquery

node.js

materialize

reactjs

webpack