webpack学习笔记1：Error: Cannot find module '@babel/core'

秒速五厘米 2023-06-13 11:28 8阅读 0赞

这两天想学一下webpack，搜了一下，感觉这篇文章不错：《[入门Webpack，看这篇就够了][Webpack]》，就照着上面做。

下面记录我遇到的几个不同的地方：

### 1. 安装webpack-cli ###

文中提到可以使用配置文件来使用Webpack，当我执行npm start时提醒需要安装webpack-cli，yes安装就是了：

![20191117144752709.png][]

这里提一点，当npm安装一些模块时，它会自动被加到package.json的devDependencies中，这个我后来才发现：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE_size_16_color_FFFFFF_t_70][]

### 2. babel的一些版本依赖问题 ###

这个问题困扰了我半天，报了很多错，比如：Error: Cannot find module '@babel/core'。

可能是这篇文章比较久远了，而babel更新了不少，所以我按文章说的去安装时，折腾了很久都没有成功，这里说一下我的安装方法，从文中“**Babel的安装与配置**”说起：

> npm install -D @babel/core

> npm install -D babel-loader

> npm install -D @babel/preset-env

> npm install -D @babel/preset-react

> npm install --save-dev react

> npm install --save-dev react-dom

最后我的devDependencies是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE_size_16_color_FFFFFF_t_70 1][]

然后就可以成功npm start了。

后面的“**Babel的配置**”还没看。

[Webpack]: https://segmentfault.com/a/1190000006178770
[20191117144752709.png]: https://img-blog.csdnimg.cn/20191117144752709.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111714515027.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019111715065578.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlud2FuZzAzMTE=,size_16,color_FFFFFF,t_70