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

Question

我正在开发一个节点express api，它通过react和CSS模块构建一个 View (每个组件中的一个CSS文件直接导入到组件中)。 React 输出使用 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;

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

Answer 1

比小说更离奇!

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

cross-env NODE_ENV=development webpack --colors

并且该过程已结束，如果我编辑文件，我仍然会看到错误!尽管据说没有观察者在奔跑。我离开了那个没有运行进程的终端窗口，打开另一个终端并使用 vi 编辑了我的 src 目录中的文件(关闭了 WebStorm，以防它运行了一些奇怪的观察程序)。令人难以置信的是，原来的终端窗口又弹出了错误!!!

看来我的问题是由未正确终止的流氓 webpack 监视进程引起的。找不到手动终止它的进程，因此必须重新启动。在这个奇怪的问题上浪费了几个小时。至少我的整个构建过程再次正常运行。