webpack.config 之外的 Webpack css 加载器配置？答案

【问题标题】：Webpack css loader configuration outside of webpack.config?webpack.config 之外的 Webpack css 加载器配置？
【发布时间】：2017-11-30 22:37:49
【问题描述】：

我正在将 webpack 和 css-loader 与一个 React 应用程序一起使用，该应用程序在我编写它的原始目录中的 webpack 开发服务器上运行良好。但是，在推送到 git 并克隆存储库后，克隆的版本不会加载 css（详情如下）。

除了 webpack.config.js、package.json、package-lock.json，还有其他地方可以配置 webpack 加载器吗？或者，关于为什么应用程序副本中的行为会有所不同的任何想法？我在没有 .gitignore 的情况下尝试了此操作，以确保我没有剥离任何内容，因此所有文件都应该相同。

编辑：现在在开发服务器上运行副本后，原件也无法正常工作，所以我正在寻找缓存的东西。

更多细节：

克隆后我发现我使用了不正确的加载器语法，因为 webpack.config.js 中现在需要“-loader”。出于某种原因，它可以在原始副本中使用，但两个实例都在 webpack 3.8.1 和 css-loader 0.28.7 上。（而且由于 package.json、package-lock.json 和 /node_modules 都在 git 中，所以一切都应该是相同的版本 - 对吧？）

这适用于我的原始存储库：

webpack.config.js:
(...)
{
    test: /\.css$/,
    loader: 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
},

但在克隆目录中导致此错误：

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
             You need to specify 'css-loader' instead of 'css',
             see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
 @ ./app/components/GroupTable.js 3:0-37
 @ ./app/components/MainView.js
 @ ./app/components/App.js
 @ ./app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./app/index.js

所以我将其更新为：

webpack.config.js
(...)
{
        test: /\.css$/,
        loader: 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    },

当我添加“-loader”webpack.config.js 时，css 没有像以前那样加载。 webpack.config 中没有其他测试对 .css 文件评估为 true。

我知道的配置文件（webpack.config.js、package.json、package-lock.json）在两个副本之间是相同的，所以我试图找出还有什么可能导致差异行为。

【问题讨论】：

标签： git reactjs webpack css-loader

【解决方案1】：

万一有人发现这个问题，看起来上面列出的文件之外没有没有配置。我相信问题是我在对 css 加载器进行更改后没有从 webpack 重建，所以没有意识到我已经破坏了它。我在 git 的副本中运行构建，因此它使用了收到的配置，但该配置已损坏。

这解决了是否存在隐藏配置的问题，但似乎没有。我仍然不确定为什么这个加载器不起作用：

loader: 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'

但与此同时：

{
    test: /\.css$/,
    loader: "style-loader!css-loader"
},

【讨论】：