webpack 之loader的基本使用

## 关于Loader

 

* loader作用

 

>loader 可以看做具有文件转换功能的翻译员，在配置文件的moudle.rules数组中配置了相应为规则，告诉webpack在遇到文件该用声明loader文件加载和转化，例如加载css文件的loader使用如下：

 

```javascript

moudle:{

rules: [

{

test: /\.css$/,

use: ['style-loader', 'css-loader?minimize']

}

]

}

```

 

>在配置css使用loader时

>1.test中是正则表达式，表示要转换文件的类型，`/\.css$/`是css文件

>2.use:是由一个loader组成的数组，其中的数组加载顺序是由后向前加载执行的顺序

>在使用loader时可以传入参数，通过url的方式，例如例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。想要知道loader支持哪些属性可以去相应官网去查

>传参的方式还可以是通过Object传入，css使用可以改变为

 

```javascript

use:[

'css-loader',

options: {

minimize: true,

}

],

 

* loader安装

 

>在执行webpack打包时，先安装相应的loader才能转换文件

>npm i -D style-loader css-loader

 

安装成功后重新执行构建时，你会发现 bundle.js 文件被更新了，里面注入了在 main.css 中写的 CSS，而不是会额外生成一个 CSS 文件。

此时会把样式注入到html中style标签中