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

Question

我正在react中处理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'
            ]
          }
        }]
      }
    ]
  }
}

Answer 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"],
      }
    ]
  }
}

Answer 2

尝试添加

"babel": { "presets": ["@babel/preset-env"] }

到 package.json 文件的末尾 - devDependencies 之后（您可能还需要通过 Yarn 添加 @babel/preset-env。）