loader就是集成到webpack的文件处理方法，这些loader在webpack打包过程当中，能够对指定类型的文件进行相应的处理。
在webpack中[万物皆模块]，loader其实就是node模块，做为模块，在执行完以后会导出内容。在webpack定义中，loader导出的是一个函数，loader会在执行源模块时，将源模块转换成通用模块。好比.js后缀的文件就是一个源模块，调用babel-loader进行转换。javascript
loader优先级问题：
（1）配置项module的rules中同一个test下的use中的loader的优先级：优先处理的loader放在配置数组的后面，见下面的对scss的处理。css
{ test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'postcss-loader', 'sass-loader' ] }
loader的执行顺序是：sass-loader postcss-loader css-loader vue-style-loader
（2）不一样test内的优先级：能够用enforce:’pre’强调优先级
对js后缀文件的处理须要两个test的配置，使用 eslint-loader 和 babel-loader ，可是又不能配置在一个配置对象内，可以使用 enforce: ‘pre’ 强调优先级，由 eslint-loader 优先处理。html
module：{ rules: [{ text: /\.(vue|js|jsx)$/, loader: 'eslint-loader', exclude: /node_modules|build/, // 这些地方的文件不在考虑范围内 enforce: 'pre' },{ text: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }]
}
几种经常使用的loader
1.css预处理器配置
以配置scss文件为例vue
{ test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'sass-loader'
]
}
当在业务代码中引入一个scss文件时，
（1）sass-loader处理scss语法
（2）postcss-loader进行前缀添加
（3）css-loader将内容引入到文件中，相似@import和url（…）的方法实现require的功能
（4）vue-style-loader生成style标签，将计算后的样式插入到页面中（style-loader也是这个功能）
2.postcss-loader
postcss-loader 是一个强大的 css 处理工具，能够将 postcss 的配置拆分出去，新建 postcss.config.js 配置文件
const autoprefixer = require(‘autoprefixer’)java
// 处理须要加浏览器前缀的css属性
module.exports = {
plugins: [
autoprefixer()
]
}
3.bable-loader
咱们使用 babel 编译浏览器不能识别的 js、类 js 语法，如转义 ES6+、JSX等。一样将 babel-loader 的配置拆分出去，须要建立 .babelrc 并配置：node
{
"presets": [ "env", "stage-1" ],
"plugins": [ "transform-vue-jsx", "syntax-dynamic-import" ] }
“presets”：须要启动怎样的预设转码
“env”：能够设置 targets 来智能识别当前运行环境，进行适当的转码，而不是一股脑的所有转码 成 es5 等
“stage-1”:须要安装npm install –save-dev babel-preset-stage-1，预设转码方式的一种
“plugins”：一些插件，根据状况添加 详见网址：https://excaliburhan.com/post/babel-preset-and-plugins.html
4.媒体资源loader
须要对图片、视频、文字等进行loader的配置，用到的是url-loader
例如对图片的配置：webpack
{ test: /\.(png|gif|jpg|jpeg|svg)$/, use: [{ loader: 'url-loader', options: { limit: 1024, name: 'resources/[path][name].[hash:8].[ext]' // 生成到dist底下的resource中，路径按照原路径已有的名字命名 }
}]
}
url-loader
*会配合 webpack 对资源引入路径进行复写，也就是所谓的引入路径的问题。例如：background样式用url引入背景图，webpack最终会将各个模块打包成一个文件，所以咱们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会致使图片引入失败。这个问题须要file-loader解决（后面详细说明）
* 会以 webpack 的输出路径为基本路径，以 name 配置进行具体输出
* limit 单位为 byte，小于这个大小的文件会编译为 base64 写进 js 或 html
这里不得不说到另一个loader：file-loader
file-loader能够解析项目中的url引入（不只限于css），根据咱们的配置，将图片拷贝到相应的路径，再根据咱们的配置，修改打包后文件引用路径，使之指向正确的文件。
因此说url-loader到底解决了什么问题呢？
（1）资源引入路径的问题
（2）图片较多时，会发不少http请求，页面性能下降的问题。url-loader会将引入的图片编码，生成dataURl。至关于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只须要引入这个文件就能访问图片了。固然，若是图片较大，编码会消耗性能。所以url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
url-loader和file-loader是什么关系呢？
简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即便用url-loader时，只须要安装url-loader便可，不须要安装file-loader，由于url-loader内置了file-loader。
上述代码中的options未涉及到的两个参数是:outputPath publicPath
这部分详见网址：https://blog.csdn.net/qq_38652603/article/details/73835153
5.vue-loader
打包vue项目时，会用到vue-loader，它的做用是将vue组件转化为js模块
相关特性见官网：https://vue-loader-v14.vuejs.org/zh-cn/
具体使用：
vue-loader也是很强大的一个loader，咱们通常将其提取出来vue-loader.config.js中，以下，其中isDev是对环境的判断git
// vue-loader.config.js
module.exports = (isDev) => {
return {
preserveWhitepace: true,
extractCSS: !isDev
// cssModules: {
// localIdentName: '[path]-[name]-[hash:base64:5]',
// camelCase: true
// },
// hotReload: false, 根据环境变量生成
}
}
在webpack.config.base.js中引入github
// webpack.config.base.js
const creatVueLoaderOption = require('./vue-loader.config.js')
const isDev = process.env.NODE_ENV === 'development'
const config= {
mode: process.env.NODE_ENV || 'production',
module: {
rules:[
{
test: /\.vue$/,
loader: 'vue-loader',
options: creatVueLoaderOption(isDev)
}
]
}
}
vue-loader 会对 .vue 单文件组件进行处理，对 .vue 单文件组件内的各类 lang=”type” 咱们能够在 vue-loader 的 options 配置不一样的 loader，因为 vue-loader 内置了 postcss 对 css 进行处理，所以无需再对其进行配置web
我的打包了一个简单的vue项目，详见github:https://github.com/LinlyX/myNotepade