You may need an appropriate loader to handle this file type, currently no loaders are configured...

报错是这样的：

ERROR in ./src/index.js 8:13
Module parse failed: Unexpected token (8:13)
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
|
> const fire = <div id='fire'>Breed</div>
|
| ReactDom.render(fire, document.getElementById('parent'))

出现环境是：

webpack4.x + react使用 jsx 语法

从报错的信息中，我们可以看出是缺少loader插件，即需要loaders 指定 babel-loader 编译后缀名为 .js 或者 .jsx 的文件，这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。

先贴上webpack.config.js的配置：

module.exports = {
    // mode: 'development'
    // 约定大于配置
    mode: 'production', 
    plugins:[
        ...
    ],
   module: { //要打包的第三方模块
	    rules: [
	      { test: /\.js|jsx$/, use: 'babel-loader', 
	      exclude: /node_modules/ }
	    ]
	}
}

然后是对package.json和.babelrc的配置

这里格外需要注意：因为babel-loader的7.x版本和8.x版本的配置相差挺大的，
先从大体上介绍一下babel-loader8的变化点：

1. 各个包的名字变了，都以@符号开头。这个变化带来2个影响。其一，以前每个包在node_modules目录下都是一个独立的文件夹；现在则在node-modules目录下有个叫“@babel”的目录，这里要安装的所有babel包，都在这个@babel目录下保存。其二，在配置的时候，写法完全变了。
2. 有一些包被彻底废弃。比如在babel7.X版本中用到的babel-preset-stage-0
3. 有一些新的包必须引入进来才可以。

分别介绍7.x和8.x下的配置方法

• 7.x

.babelrc文件:

{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}

package.json文件：在"devDependencies"下加上如下代码,然后删去node-modules文件夹，重新npm install

   
	"babel-core": "^6.26.3",
	"babel-loader": "^7.1.5",
	"babel-plugin-transform-runtime": "^6.23.0",
	"babel-preset-env": "^1.7.0",
	"babel-preset-react": "^6.24.1",
	"babel-preset-stage-0": "^6.24.1",
 

如果选择不写入package.json文件，直接npm的方式的话：（注意babel-loader@7 ）

npm i babel-core babel-loader@7 babel-plugin-transform-runtime –D
npm i babel-preset-env babel-preset-react babel-preset-stage-0 –D

记得检查babel-loader的版本号，如果是8.x的话其他配置就失效了

• 8.x

.babelrc文件:

 {
　　　"presets": ["@babel/preset-env","@babel/preset-react"],
　　　"plugins": ["@babel/plugin-transform-runtime", 
　　　"@babel/plugin-proposal-class-properties"]
 }

package.json文件：在"devDependencies"下加上如下代码 ,然后删去node-modules文件夹，重新npm install

	"@babel/core": "^7.3.4",
	"babel-loader": "^8.0.5",
	"@babel/runtime": "^7.8.4",
	"@babel/plugin-transform-runtime": "^7.8.3",
	"@babel/plugin-proposal-class-properties": "^7.8.3",
	"@babel/preset-env": "^7.8.4",
	"@babel/preset-react": "^7.8.3",
	
 

如果选择不写入package.json文件，直接npm的方式的话：

npm i @babel/core babel-loader @babel/plugin-transform-runtime –D
npm i @babel/preset-env @babel/runtime @babel/plugin-proposal-class-properties @babel/preset-react –D

最后

任意选择一种版本并配置即可，如果配置后仍然报错，请检查package.json中babel-loader版本与配置是否不符合，或者和.babelrc的配置是不是不符合。