Webpack配置问题

Question

我正在接手维护一个之前被别人停止维护的小型React工具项目。但是，我无法运行它。这是一个与webpack配置有关的问题，我已经尝试将其重构到最小的大小，但仍然无法运行。

以下是目前的文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: './client/index.js',
 output: {
  path: path.join(__dirname, 'client'),
  filename: 'bundle.js'
 },
 module: {
     rules:[{
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                options: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            }],
        
        },
      resolve: { extensions: ['*', '.js', '.jsx'],
        alias: { 'react-dom': '@hot-loader/react-dom'  } },
}
    

这是我遇到的错误：

错误：编译规则集失败：感叹号分隔的加载程序列表已被移除，改用 'use' 属性与数组 (在 ruleSet[1].rules[1].loader 处：style-loader!css-loader)

- fesieg

Answer 1

错误信息说您必须使用数组配置（例如：use: ['style-loader', 'css-loader'] 而不是 loader："style-loader！css-loader" ）。以下是来自webpack网站的示例。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

您可以在https://webpack.js.org/loaders/style-loader/查看详细信息。

- Tung Nguyen