html loader的作用,webpack认识loader的作用

举例：

如果希望在.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降级问题