从零开始学习webpack配置

初次学习webpack配置，按照这篇文章一步一步进行，

入门Webpack，看这篇就够了，因为webpack版本的更新，里面一些配置已经失效了，在此记录一下我根据这篇文章配置webpack的过程中，出现的一些问题，

首先在配置json-loader的时候，报错

Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {"v...'
File was processed with these loaders:
* ./node_modules/json-loader/index.js

一时找不到解决办法，后来根据这篇文章里面的设置解决掉报错的问题了，

webpack构建性能提升的一些常用措施，感觉又发现了一篇宝藏文章。

终于用react-babel配置出来了react项目

经过各种试错查询，终于配置出来了最最最简单的一个react项目，还是参考入门webpack，看这篇就够了

这篇文章，发现这篇是16年写的，现在已经是22年了，里面很多配置都改了，所以我们通过这篇文章学习的时候，会发现按照原来写的配置，我们在打包的时候会出现很多报错，但是我认为这篇文章是我们学习入门webpack是比较好的一篇，所以在此记录一下我在配置这篇文章里面的react项目的时候遇到的一些问题，

 在这一部分是讲解利用babel-react转换react项目的，

 

 首先在新版本的babel-loader配置里面，这种配置已经被舍弃了，

已经改成这种设置了

 同时之前loaders对象里面的query相对应的也变成了options,具体讲解可以参考这里面的解答:在新版本的webpack和babel中设置presets

另外如果我们暗转的时候没有指定babel版本的话，默认暗转的是最新的babel版本，

如果按照原来这种方法配置es6转es5的loader，以及react的loader的时候，可能会出现以下的报错信息：

Error: Plugin/Preset files are not allowed to export objects, only functions

原因在这里说明了：Error: Plugin/Preset files are not allowed to export objects, only functions

就是因为babel版本是最新的，但是es6转es5的loader，以及react的loader不是最新的，这两者最新的版本是需要在前面加上@符号的，并且es6转es5的loader也换名字了，解决的方法就是安装最新版babel对应的loader,执行命令

npm i -D @babel/preset-env @babel/preset-react

第一个是es6转es5的loader，第二个是react的loader,

然后再在webpack.config.js的文件中进行这样的配置就可以了

 执行npm start命令就可以转换react项目了。

最后分享一篇es6转es5 babel配置的文章，使用Babel将ES6+转换成ES5