React Webpack3：你可能需要一个合适的加载器来处理这个文件类型答案

【问题标题】：React Webpack3: You may need an appropriate loader to handle this file typeReact Webpack3：你可能需要一个合适的加载器来处理这个文件类型
【发布时间】：2020-03-09 18:37:54
【问题描述】：

我正在尝试将 Webpack3 与 Babel 一起使用来编译 ES6 资产，但我收到错误消息“您可能需要适当的加载器来处理此文件类型。”以下是我得到的确切错误：

ERROR in ./node_modules/use-global-hook/index.js
Module parse failed: Unexpected token (2:18)
You may need an appropriate loader to handle this file type.
| function setState(store, newState, afterUpdateCallback) {
|   store.state = { ...store.state, ...newState };
|   store.listeners.forEach((listener) => {
|     listener.run(store.state);
@ ./src/components/dynamicLabel/store/index.js 11:21-47
@ ./src/components/dynamicLabel/components/dynamicLabel.js
@ ./src/components/dynamicLabel/index.js

这是我的 webpack.config.js 的样子：

const path = require('path');

module.exports = {
  devtool: 'source-map',
  entry: {
    csvparse: './src/components/csvparse',
    dateTime: './src/components/dateTime',
    gmoment: './src/components/gmoment',
    dynamicLabel: './src/components/dynamicLabel',
    gvideo: './src/components/gvideo',
    stickyScroll: './src/components/stickyScroll',
    webAccessibility: './src/components/webAccessibility'
  },
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: '[name]/index.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.js', '.jsx','.less']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },

      {
        test: /\.(?:le|c)ss$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1
            }
          },
          {
            loader: require.resolve('less-loader'),
            options: {
              importLoaders: 1
            }
          }
        ]
      }
    ]
  },
  externals: {
    'react': 'commonjs react'
  }
};

这是我的 package.json 中的 babel 对象部分：

"babel": {
    "presets": [
      "es2015",
      "stage-2",
      "react"
    ],
    "plugins": [
      [
        "transform-runtime",
        {
          "regenerator": true
        }
      ]
    ]
  },

有人可以帮我解决这个问题吗？

提前谢谢你。

【问题讨论】：

标签： reactjs webpack babeljs webpack-3

【解决方案1】：

尝试使用@babel/plugin-proposal-class-properties

【讨论】：