初次学习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