Webpack和babel配置问题：“您可能需要适当的加载程序来处理此文件类型。”

Question

我正在尝试通过将其作为节点模块导入，将另一个项目引入我们的新项目。 我收到以下错误消息：

   WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./src/index.js 8:16
Module parse failed: Unexpected token (8:16)
You may need an appropriate loader to handle this file type.
| import * as serviceWorker from './serviceWorker';
| 
> ReactDOM.render(<App />, document.getElementById('root'));
| 
| module.hot.accept();
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main[2]
ℹ ｢wdm｣: Failed to compile.

据我所知，这与webpack.config.js ， .babelrc或package.json中的错误设置有关。 我看到更多的人遇到了这个问题，并且我尝试遵循答案中看到的结构，但是没有一个对我有用。 现在，我得到了仍然导致此错误的以下文件。 无论我做什么，该错误都不会消失：

的package.json：

{
  "name": "mysecondapp-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "myfirstapp-react": "^2.1.2",
    "jquery": "^3.3.1",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router": "^4.4.0-beta.1"
  },
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --open --mode development",
    "build": "webpack --mode build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "react-hot-loader": "^4.6.3",
    "react-svg-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

.babelrc：

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

webpack.config.js ：（由于我为了定位错误而进行了大量编辑，这看起来可能有点混乱）

const path = require("path");
const webpack = require('webpack');
module.exports = {
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: './dist',
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js(x)$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
        query: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      },
      {
        test: /\.(css|less)$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.svg$/,
        loaders: [
          'babel-loader',
          {
            loader: 'react-svg-loader',
            query: {
              jsx: true
            }
          },
        ]
      }
    ]
  },
};

Answer 1

我通过更改解决了该问题：

test: /\.js(x)$/

至

test: /\.jsx$/