Webpack的css-loader失败了："您可能需要一个适当的加载器来处理此文件类型"。

Question

我正在构建一个使用TypeScript和Webpack 4的React应用程序。我尝试从react-select导入CSS文件，但是遇到了通用错误：

ERROR in ./node_modules/react-select/dist/react-select.css
Module parse failed: Unexpected token (8:0)
You may need an appropriate loader to handle this file type.
|  * MIT License: https://github.com/JedWatson/react-select
| */
| .Select {
|   position: relative;
| }
 @ ./src/App.react.tsx 28:0-45
 @ ./src/Root.react.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/index.tsx

我曾遇到一个问题，尝试在加载 .graphql 文件之前添加一个加载程序，但失败了... 我想这些问题是相关的；我的配置有问题，无法利用这些额外的加载程序。

我从https://github.com/webpack-contrib/css-loader中直接获取了最简单的css-loader设置。

我的file-loader完全正常运行。

以下是我认为相关的代码片段：

来自webpack.common.ts:

const config: webpack.Configuration = {
  module: {
    rules: [
      ...
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.css'],
  },
  ...
};

来自App.react.tsx：

import 'react-select/dist/react-select.css';
...

但是猜测有些超出上下文的因素导致了问题。需要更多的上下文信息……

webpack.common.ts

import * as HTMLPlugin from 'html-webpack-plugin';
import * as CleanWebpackPlugin from 'clean-webpack-plugin';
import * as webpack from 'webpack';

const config: webpack.Configuration = {
  // Root TS file for bundling
  entry: './src/index.tsx',
  module: {
    rules: [
      // Bundle files (e.g. images)
      {
        test: /\.(png|jpg|gif)$/,
        use: ['file-loader'],
      },
      // Transpile & type check with babel/typescript loader
      {
        test: /\.tsx?$/,
        use: [
          {
            // Need babel for React HMR support (otherwise could drop babel and use just typescript)
            loader: 'babel-loader',
            options: {
              babelrc: true,
              plugins: ['react-hot-loader/babel'],
            },
          },
          'ts-loader',
        ],
      },
      // Handle .css files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
    ],
  },
  // Enable served source maps
  devtool: 'inline-source-map',
  resolve: {
    // Include all these extensions in processing (note we need .js because not all node_modules are .ts)
    extensions: ['.ts', '.tsx', '.js', '.css'],
  },
  // Webpack Dev Server for running locally
  devServer: {
    // Play nicely with react-router
    historyApiFallback: true,
    port: 3000,
    // Enable hot module reloading (HMR)
    hot: true,
  },
  plugins: [
    // Cleans the build folder per-build/reload
    new CleanWebpackPlugin(['dist']),
    // Builds the .html file for entering into bundle
    new HTMLPlugin({
      template: 'INDEX_TEMPLATE.html',
    }),
    // HMR plugins
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    // Prevents webpack watch from going into infinite loop (& stopping on retry) due to TS compilation
    new webpack.WatchIgnorePlugin([
      /\.js$/,
      /\.d\.ts$/,
    ]),
  ],
};

export default config;

tsconfig.json

{
  "compilerOptions": {
    // Required option for react-hot-loader
    "target": "es6",
    // Required option for react-hot-loader
    "module": "commonjs",
    "strict": true,
    "jsx": "react",
    // Absolute imports start from here
    "baseUrl": ".",
    "sourceMap": true
  }
}

请告诉我是否还有其他值得注意的事情可能是问题的一部分...谢谢！

- Tadas Antanavicius

Answer 1

楼主在这里。看起来是一个愚蠢的问题：我在WebStorm TypeScript编译器上点击了“Compile All”按钮，然后css-loader开始正常工作。所以我猜webpack使用了一个未更新的webpack.common.js文件，而不是我问题中的webpack.common.ts文件。

我试图理解为什么它引用了已编译的.js文件，即使我的命令是：

webpack-dev-server --mode development --open --config config/webpack.development.ts

可能与我使用webpack-merge有关，因此导入webpack.common：import common from './webpack.common';。在导入时没有扩展名，因此由某种原因默认为.js。

如果其他人遇到此问题，请参考此问题配置WebStorm一次性删除*.ts *.js *.js.map的有用提示：使用tsconfig.json中的outDir选项将生成的文件（.js和.js.map）输出到另一个文件夹中。然后可以轻松清理构建文件夹

如果我发现更多信息，我会回报的。

- Tadas Antanavicius