webpack学习之路-------各种错误报告

可能是我点背，用了很长时间学习webpack，可是总是出现各种错误，有的还解决不掉，把目前已经解决的各种错误和大家分享一下，真的感觉我承担了这个年纪不应该有的bug。

一。用npm run dev进行打包时出现了这个错误，打包不了CSS样式，可是CSS镜像已经安装了啊。那叫一个绝望啊。

ERROR in ./src/app.js
Module not found: Error: Can't resolve 'sass-loader' in 'F:\webpacktest'
 @ ./src/app.js 1:0-28

 解决办法：在配置文件中的rules选项中删除sass-loader，也就是我圈起来的灰色区域。删除之后就可以把CSS样式打包了。

二。打包的时候有错误：

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

解决办法：一定要去检查配置文件的entry入口的文件导入是否出错，导入为空。修改正确即可。

下面是我的正确结果，然后就可以正常打包了。

 

三。还是打包错误：

ERROR in Entry module not found: Error: Can't resolve './js/index.js' in 'F:\Code\React.js\test\src/src'

解决办法：entry入口可能错了，自行修改。

四。CSS错误

解决办法：

默认情况下，webpack 处理不了 CSS 的东西。

我们来处理这个问题。输入命令如下所示：npm install --save-dev css-loader style-loader

五。如果在安装CSS包的时候遇到问题

解决方法：可能是配置文件中的正则验证格式有问题，我之前的错误写了scss，现在已经修正了。

 

六。在打包的过程中webpack-cli抛出错误

 

我查看了我的package.json文件中的信息，第26,27行

错误报告的原因：以上版本配置信息webpack-dev-server版本比cli高导致错误

安装webpack-dev-serve步骤：

 npm install -g webpack-dev-server
npm install --save-dev webpack-dev-server

打包
npm run dev

解决方案：重新安装一个低版本的cnpm install [email protected] --save-dev

//卸载版本
cnpm uninstall webpack -g
cnpm uninstall -g webpack-dev-server
 
//安装指定版本
cnpm install [email protected] --save-dev
cnpm install [email protected] --save-dev

 

七。没有打包图片的工具：

解决方法：只要找到适合的 loader 来处理扩展名为 png 的图片文件即可。