webpack3.6.0与css-loader和style-loader版本不兼容报错解决以及其他配置

使用的webpack版本为3.6.0
在将css文件进行打包的过程中提示
需要使用到loader对文件进行处理
官方文档 ：https://webpack.js.org/loaders/
中文文档：https://www.webpackjs.com/loaders/
loader使用过程：
步骤一：通过npm安装需要使用的loader
步骤二：在webpack.config.js中的modules关键字下进行配置

注意版本对应的问题： 我使用的是webpack3.6.0 尝试过css-loader2.0.2报错
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
如果前面已经安装过loader 请记得先卸载 npm uninstall xxx-loader
按照下面执行正确
npm install --save-dev [email protected]
npm install --save-dev [email protected]

再次打包之后可以看到浏览器能正确显示css样式

---

=====================
2022.3.30下午 补充：
less的版本–》
npm install [email protected] [email protected] --save-dev

---

=====================
2022-4-20更新：
图片文件处理：
npm install --save-dev [email protected]

如果小于limit大小的按照url-loader处理 否则按照file-loader进行处理
npm install --save-dev [email protected]
修改文件名称 可以在options下添加name属性
但是，我们发现图片并没有显示出来，这是因为图片使用的路径不正确
默认情况下，webpack会将生成的路径直接返回给使用者
但是，我们整个程序是打包在dist文件夹下的，所以这里我们需要在路径下再添加一个dist/
（entry是相对命令行的当前目录的，而不是配置文件目录）