举例：
如果希望在.html文件中使用style.css样式，我们以前只学习过一种方式：直接在.html中通过link的方式来引入 ，这是传统的做法，在webpack语境下，我们将选择一条不同的道路：在js文件中引入了css。
在入口文件中引入css会报错，这时候我们使用loader即可解决（它认为是在入口文件引入一个模块。（在webpack中一切皆模块））
*********************************************
步骤
在css中引入另一个css
然后在js（入口文件）中引入会报错
安装loader
npm i css-loader -D
开始引入：
打包成功
再次打包
它不会报错，但是，页面上也并没有出现样式的效果。检查打包之后得到的目标代码.js文件，发现其包含css代码。但是，它为什么不会显示在页面上呢？
如果我们希望样式生效，最终在.html文件中有两种情况：
①有style标签
②有link标签
而css-loader只是允许你在.js中通过import来引入.css，如果你希望引入的css代码最终以style标签的方式插入到html页面中，则还需要安装一个loader:style-loader
安装并使用style-loader
npm i style-loader -D
最终结果：
html + js 可以有样式
他还会告诉你样式是在那个文件中出现的
这个js文件会自动给你加style（前边入口处的代码）
重点：注意这里容易报错，看仔细
引入less（记得css的也同样要引入）
在入口文件中引入less
一打包就错误
装包
npm i less-loader less -D
写配置
自动添加css样式前缀（写css样式会有兼容性问题，去看看）
https://www.caniuse.com/flexbox
可以在这个网站查兼容性的情况
红色不能用
灰色要加前缀
全背下来或者去查太慢了，所以我们可以使用loader来安装以来
步骤
安装依赖
在modules中补充设置postcss-loader
单独设置postcss的autoprefixer插件
npm i postcss postcss-loader autoprefixer -D
内容不用记（官网固定写法）
{
test: /\.less$/,
// 匹配成功后（从后向前；从右到左）
// 1. 先用less-loader去加载.less文件,转成css
// 2. 用postcss-loader配合autoprofixer加浏览器前缀
// 3. 先用css-loader去加载css文件
// 4. 再用style-loader把样式以style标签的方式嵌入到html中
use:['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}
在less中写兼容性的样式后
会自动给你加前缀
如果只想兼容ie10
注释掉其他的，只管ie10
6、file-loader-处理图片文件
解决方法：
build里多了两个文件
觉得这样不好，再添加一局代码
这样写，打包之后打开之后不显示
要注意：此时打包得到的图片的路径可能有问题，需要你把src下的index.html手动复制一份到目标文件夹，并同时修改引用的css，才能正确看到图片。(后面会改成自动去复制)
7、文件指纹
文件名_八位hash值加后缀名
8、url-loader处理图片
设置小于3k的转成base64，所以当我们发送请求的时候不需要在请求这个小文件，因为它已经被转成base64字节放到js里
9、使用babel-loader处理js降级问题
