5.webpack相关loader的配置

webpack到底是如何对项目进行打包的？

（1）首先webpack在处理应用程序时，他会根据命令或者配置相关文件找到入口文件。

（2）从入口开始，会生成一个依赖关系，这个依赖关系会包含应用程序中所需的所有模块（比如js文件、css文件、图片、字体等）

（3）然后遍历结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；

Loader 是什么？

loader 可以用于模块的源代码进行转换；

1.Css-loader的使用

安装：css-loader

npm install css-loader -D

使用loader加载css文件，有两种方式：

内联方式；

import "css-loader! ../css/style.css" //!分割 是前面的文件和后面的文件分割的

配置方式；

配置方式表示的意思是在我们的webpack.config.js文件写明配置信息；

(1)module.rules中允许我们配置多个loader(因为我们后续也会继续使用其他的loader,来完成其他文件的加载）

（2）这种方式可以更好的表示loader的配置，也方便后期的维护

module.rules的配置如下：

（1）rules属性对应的值是一个数组：[Rule]

（2）数组中存放的是一个个的Rule,Rule是一个对象，对象中可以设置多个属性

• test属性：用于对resource(资源）进行匹配的，通常会设置成正则表达式
• use属性：对应的值时一个数组:[UseEntry]

      UseEntry是一个对象，可以通过对象的属性来设置一些其他属性

     loader:必须有一个loader属性，对应的值是一个字符串

    options:可选的属性，值是一个字符串或者对象，值会传入到oader中；

    query:目前已经使用options来代替；

module.exports={

module:{
rules:[ //规则

{
test:/\.css$/,      //正则表达式
//loader:"css-loader"  loader的语法糖
//使用use可以写多个loader，完整的写法
  use:[

   {loader:"css-loader"} //这样写表示里面可以写多个参数 

]}]}}

2.配置Style-loader

(1)因为css-loader只是负责.css文件进行解析，并不会将解析之后的css插入到页面中

（2）如果希望在完成插入style的操作，那么我们还需要另外一个loader，style-loader

因为loader的执行顺序是右向左(或者说从上到下，或者说从后到前的，所以我们需要将style-loader写到css-loader的前面)

use:[
"style-loader",
"css-loader"
]

3.处理less文件

（1）局部安装一个less 工具，会自动按装lessc

npm install less -D

(2)通过npx去找node_module 命令找到lessc,

npx lessc ./test.less demo.css //找到lessc 告诉它要对test文件做编译，转化成base.css文件

4.什么是PostCSS

• PostCSS是一个通过JavaScript来转换样式的工具；
• 这个工具可以帮助我们进行一些CSS的转化和适配，比如自动添加浏览器前缀，css样式重置
• 查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader;
• 添加需要的PostCSS相关的插件；

注意：不能直接在终端使用Postcss;

1.要使用的也是可以的，需要单独安装一个工具postcss-cli;

npm install postcss postcss-cli -D   //核心工具 命令行安装的工具

2.因为我们需要添加前缀，所以需要安装autoprefixer

npm install autoprefixer -D

3.直接使用postcss工具，并且定制使用autoprefixer

npx postcss --use autoprefixer -o end.css ./src/css/style.css

4.如果想要文件打包的时候也加上浏览器前缀，需要在webpack.config.js里面配置一下

注意：我们想要使用postcss-loader 需要安装下 npm install postcss-loader -D

注意：因为postcss需要有对应的插件才会起效果，所以我们需要配置它的plugin;在这个里面配置它需要哪些插件

use:[
"style-loader",
"css-loader",
{
//给这个loader配置一些额外的选项
loader:"postcss-loader",
options:{
postcssOptions:{
plugins:[
require('autoprefixer')
]}}}]

同样也可以单独配置postcss配置文件

我们可以将这些配置信息放到一个单独的文件进行管理：

在根目录下创建postcss.config.js

【推荐使用】：postcss-preset-env  插件 可以不需要使用autoprefixer，它可以帮助我们将一些现代的css特性，转成大多数浏览器认识的css,并且会根据目标浏览器添加做绪的前缀。

module.exports={

plugins:[
require("postcss-preset-env")
]
}