【菜鸟搭建react项目之路6】放弃webpack5，换成webpack4

由于我在 index.html 文件中引入 main.js 出现了各种失败，所以我决定换 webpack4 和 webpack-dev-server4 了，不知道脑子想什么之前用的是 webpack5 和 webpack-dev-server4 组合。

先来讲讲我的失败历程。

报错 1: Uncaught SyntaxError: Cannot use import statement outside a module

主要原因就是 main.js 里面用了 es6 的语言，对浏览器太高级啦，没法解析。然后改了 script 的 type 解决，作为 module 引入。

解决：

<script type="module" src="./main.js"></script>

报错 2:Uncaught SyntaxError: Unexpected token '<'

紧接着就报了第二个错，查了一通发现这个理由最靠谱：main.js 用的是 react 写的，所以实际上是 JSX 语法，浏览器也是解析不了的，所以又改了 script 的 type='text/babel'。

解决：

<script type="text/babel" src="./main.js"></script>

放弃原因

好的，接下来讲讲我推翻从前重头开始的原因，改完 type='text/babel'之后确实不报错了，控制台一片空白，看着让人很舒心。但是！网页也一片空白呀！我写的 div 们都去哪啦？！一查，好家伙，network 里面看 main.js 根本没被引入啊。文件都没引入，怪不得没报错呢。

然后我又开始了漫长的为什么不引入问题的搜索，虽然没找到一个定论，但从很多篇文章代码对 script 使用 type='text/babel'的写法来看，人家都是不用 src 直接引入文件的，而是直接在 script 标签里面写代码，把 react 入口组件引入。像这样：

<script type="text/babel">
    ReactDOM.render(<App />, document.getElementById("app"));
</script>

另外我还找到一篇文章（https://blog.csdn.net/weixin_33514300/article/details/112378227）说并不推荐这样的写法，因为效率很低。

同时，我还注意到上面文章里推荐了一个方法二：webpack + babel-loader。大致意思应该是让所有的 js 文件走 babel-loader，那一瞬间，我悟了。我自认为本项目原始配置的初心是让所有 js 文件走 babel-loader，不然前面为什么花这么多心思又是装包又是配置的呢，归根结底是我对 webpack 配置不熟悉，所以让我的想法没有生效。

所以一切回到原点，要去认真学习 webpack 配置了，看网络上的 webpack4 教程好像比较多，为了给自己降低难度，我决定选择 webpack4 + webpack-dev-server4 组合，虽然我不清楚这是不是才是正确的组合，如果是的话，各位大佬请轻喷，我真的是个小小白。

在这里立下一个小flag，后面我把项目不报错的启动且正确显示出来了，会把基本配置，目录和入口代码发出来供还跟我现在一样苦苦挣扎的小伙伴们分享的～

---

以上内容以及我的其他文章有任何错误或者误导别人的地方，欢迎指出，感谢各位大佬的指教，我一定虚心接受～