模块解析失败在 webpack 中出现错误答案

【问题标题】：Module parse failed getting error in webpack模块解析失败在 webpack 中出现错误
【发布时间】：2022-01-26 22:05:03
【问题描述】：

我正在处理 webpack 的反应，当我运行这个命令 npx webpack --config webpack.config.js 时，我遇到了错误

ERROR in ./node_modules/react-toastify/dist/ReactToastify.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

在这里我附上了我的webpack.config.js，谁能帮助我为什么会出现这个错误？

const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                "targets": "defaults" 
              }],
              '@babel/preset-react'
            ]
          }
        }]
      }
    ]
  }
}

【问题讨论】：

请附上您的webpack.config.js文件内容
刚刚更新了

标签： reactjs webpack node-modules

【解决方案1】：

您需要安装style-loader 和css-loader：

npm install --save-dev style-loader css-loader

然后将加载器添加到您的 webpack 配置中。例如：

webpack.config.js

const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                "targets": "defaults" 
              }],
              '@babel/preset-react'
            ]
          }
        }]
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      }
    ]
  }
}

【讨论】：

你能检查我的 webpack.config.js，我已经更新了我的问题
尝试在你的 webpack 配置中添加上面的规则。更新了我的示例以匹配您的 webpack 配置。