在服务器端应用程序中编辑 webpack 监视文件后，webpack v3 出现 CSS 加载器错误答案

【问题标题】：CSS loader error with webpack v3 after editing a webpack watched file in a server-side app在服务器端应用程序中编辑 webpack 监视文件后，webpack v3 出现 CSS 加载器错误
【发布时间】：2017-09-27 19:00:17
【问题描述】：

我正在开发一个 node express api，它通过 react 和 CSS 模块构建视图（每个组件中的一个 CSS 文件直接导入到组件中）。反应输出使用renderToStaticMarkup() 序列化，将在 JSON 响应中发送回请求者。我也打算在此响应中发送编译后的 CSS。

我有一个通过 webpack 将我的服务器应用程序捆绑到一个文件的有效构建过程。我目前也将我的 CSS（模块）捆绑到一个文件中（打算稍后阅读）。

我正在使用 webpack 及其监视功能，如下所示（不能使用 webpack-dev-server，因为 api 需要 POST 并且无论如何都没有“页面”要更新）：

cross-env NODE_ENV=development webpack -w --colors

然而，我的问题是，虽然这在第一次编译时一切正常，但只要我更改任何文件，我就会收到一个 webpack 错误，指出我需要一个合适的加载器来导入 CSS 文件。

ERROR in ./src/app/components/Suggestions/Suggestions.css
Module parse failed: /home/me/myproject/src/app/components/Suggestions/Suggestions.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .suggestions {
|     background: blue;
|     color: orange;
 @ ./src/app/components/Suggestions/Suggestions.js 11:19-47
 @ ./src/app/components/Suggestions/index.js
 @ ./src/server/middleware/buildSuggestions.js
 @ ./src/server/routes/index.js
 @ ./src/server/server.js
 @ multi babel-polyfill ./src/server/server.js

我已尽可能简化了我的 webpack 配置，但仍然遇到问题。我的简化配置（不将 css 提取到文件并且没有 PostCSS）如下：

webpack.config.babel.js

import path from 'path';
import nodeExternals from 'webpack-node-externals';

import PATHS from './config/paths';

// Host and port settings to spawn the dev server on
const HOST = 'localhost';
const PORT = 3000;
const LOCAL = `http://${HOST}:${PORT}`;
const DEV = process.env.NODE_ENV === 'development';

let serverConfig = {
  entry: [
    "babel-polyfill",
    path.resolve(PATHS.src, 'server/server.js'),
  ],

  output: {
    filename: 'server.js',
    path: PATHS.dist,
    publicPath: '/'
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: PATHS.src,
        use: {
          loader: 'babel-loader',
          options: {
            // babelrc at project root only for compiling this webpack
            babelrc: false,
            presets: [
              'env',
              'react'
            ],
            plugins: [
              'transform-object-rest-spread',
              'syntax-dynamic-import',
              'transform-class-properties',
            ]
          }
        }
      },
      {
        test: /\.css$/,
          use: [
            {
              loader : 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[local]-[hash:base64]',
                sourceMap: DEV
              },
            }
          ]
      }
    ],
  },

  plugins: [
  ],

  target: 'node',
  externals: [nodeExternals()]
};

export default serverConfig;

所以我的问题是，为什么这在第一次编译时可以正常工作，但在更改后重新编译时不行？

【问题讨论】：

标签： css reactjs webpack css-modules css-loader

【解决方案1】：

比小说还奇怪！

所以我意识到，如果我在没有观察者的情况下运行我的构建......

cross-env NODE_ENV=development webpack --colors

并且该过程已经结束，如果我编辑了一个文件，我仍然会看到错误！！！尽管据说没有观察者在运行。我单独留下了那个终端窗口，没有运行进程，打开另一个终端并使用 vi 在我的 src 目录中编辑了一个文件（关闭 WebStorm，以防它运行了一些奇怪的观察程序）。不可思议的是，原来的终端窗口又弹出了错误！！！

所以看来我的问题是由一个没有被正确杀死的流氓 webpack 监视进程引起的。找不到手动杀死它的进程，所以必须重新启动。在这个奇怪的问题上浪费了几个小时。至少我的整个构建过程又开始工作了。

【讨论】：