loader使用
最后更新于：2022-04-02 05:32:34
[TOC]
## 前言
本文重点介绍各种loader的配置以及使用，对于本文中没有涉及的loader请自行解决完成其开发配置。
## loaders使用简介
通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理。比如对样式预处理器，js等转换。Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）
比如：对js所使用的loader，我们查看下代码部分的配置。
~~~
module: {
rules:[
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory=true',
exclude: /node_modules/,
include: [resolve('src'), resolve('test')]
}
]
} ,
~~~
## css-loader
* css解析（支持样式预处理器的解析）
因为在webpack中，最后导出的只有一个webpack的产出bundle.js文件，所以我们其他的资源比如样式就要通过import或者require的方式引入之后才能使用。下面介绍的三种方法都是可以使用的，如果你没有特殊的需求，建议使用最后一种，简单方便。
在app的目录下，我们新建main.css的样式文件，然后通过require的方式加载进去。
~~~
// 复杂配置
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
//简单写法
{
test: /\.css$/,
loaders: [ "style-loader" , "css-loader" ]
}
//简单写法2
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
~~~
css模块化，如果你想对应组件中适配性的引入样式，可以使用css模块化的方式，css-loader增加配置potions:{module:true},这样就可以在组件引入样式之后，具体使用的时候className={styles.root}。相同的类名也不会造成样式的污染。
## 样式预处理器 loader
> sass作为常用的样式预处理语言，我们需要了解其加载以及配置的方式，比如less-loader.sass-loader ,stylus-loader,postcss-loader,我们也可以类比它的使用，同时辅助autoprefixer完成样式后缀的添加。（最新的版本语法说明中需要加完整的名称sass-loader）
* 常规简单配置sass-loader
~~~
npm install --save-dev sass-loader autoprefixer node-sass
//针对样式文件，webpack里加对应的loader,最新版的语法中需要设置完整的loader
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
},
~~~
* 将样式打包为额外的样式文件 ~~~ cnpm i extract-text-webpack-plugin --save-dev //webpack.config.js中配置 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //配置文件中加相关的配置,不需要加style-loader，因为已经是css文件了。 module:{ loaders:[ { test:/\.scss/, loader:ExtractTextPlugin.extract("css-loader!sass-loader") } ] } //puligins关键字中加相关的产出文件style.css文件中，提供生产使用 plugins:[ new ExtractTextPlugin("style.css"); ] ~~~ * 将当前样式按照必要样式以及不必要样式分别加载 比如说页面基本样式是渲染必备的，但是交互弹出框部分的样式可以做延迟。下面针对这一个需求做程序上的处理。 * 将当前样式按照当前页面样式以及其他样式分别加载（待补充） * [官方sass-loader文档](https://doc.webpack-china.org/loaders/sass-loader/) ## js文件 ## babel部分 ## 图片loader ## 音频 视频loader ## vue文件
';
* 将样式打包为额外的样式文件 ~~~ cnpm i extract-text-webpack-plugin --save-dev //webpack.config.js中配置 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //配置文件中加相关的配置,不需要加style-loader，因为已经是css文件了。 module:{ loaders:[ { test:/\.scss/, loader:ExtractTextPlugin.extract("css-loader!sass-loader") } ] } //puligins关键字中加相关的产出文件style.css文件中，提供生产使用 plugins:[ new ExtractTextPlugin("style.css"); ] ~~~ * 将当前样式按照必要样式以及不必要样式分别加载 比如说页面基本样式是渲染必备的，但是交互弹出框部分的样式可以做延迟。下面针对这一个需求做程序上的处理。 * 将当前样式按照当前页面样式以及其他样式分别加载（待补充） * [官方sass-loader文档](https://doc.webpack-china.org/loaders/sass-loader/) ## js文件 ## babel部分 ## 图片loader ## 音频 视频loader ## vue文件