预处理器Loader

html、css、模板、图片、字体等，webpack怎么处理呢
loader赋予webpack可处理不同资源类型的能力，丰富了可扩展性。

1.一切皆模块

image.png

清晰的描述了资源之间的关系，当移除这个组件时，只要移除组件JS的引用即可，代码的可维护性更强。更加直观可维护性更强。
2.loader的原理
loader本质上是一个函数。webpack4之前，函数的输入和输出都必须为字符串，在webpack4之后，loader也同时支持抽象语法树（AST）的传递，通过这种方法来减少重复的代码解析。
output = loader（input）
这里的input可能是工程源文件的字符串，也有可能是一个loader转化后的结果。如果是最后一个loader，结果直接放到webpack进行后续处理，否则作为下一个loader的输入向后传递。
3.如何引入一个loader
loader主要做的是预处理的工作

npm install css-loader style-loader
module: {
    rules: [{
      test: /\.css$/,
      // use: ['style-loader', 'css-loader']
      use: ['style-loader', {
        loader: 'css-loader',
        options: {}
      }],
      exclude: /node_modules/
    }]
  }

enforce 接收‘pre’ ‘post’，设置执行顺序
4.常用loader的介绍
loader 本身是一个函数，loader可以接收字符串、source map、AST对象，output同理
loader可以是链式的，我们可以对一种资源设置多个loader，上一个loader可以作为下一个loader的输入
babel-loader 处理ES6+ 将其编译为ES5
安装npm install babel-loader @babel/core @babel/preset-env
babel-loader babel与webpack协同工作的模块
@babel/core babel编译器的核心模块
@babel/preset-env bebel官方推荐的预置器，可以根据用户设置的目标环境自动添加所需的插件和补丁来编译ES6+代码
会将ES6 Module 转化为CommonJS的形式，会导致webpack的tree-shaking特性失效，将@babel/preset-env的Module的预发交给webpack本身处理

{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true, // 启用缓存机制,启用缓存机制，在重复打包未改变过的模块时防止二次编译，也会加快打包速度，可以接收路径也可以是true（目录会指向node_modules/.cache/babel-loader）
          presets: [[
            'env', {
              module: false
            }
          ]]
        }
      }
    }

babel-loader支持从.babelrc文件读取Babel配置，因此可以讲presets和plugins从webpack配置文件中提取出来

ts-loader

npm install ts-loader typescript
{
      test: /\.ts$/,
      use: 'ts-loader'
}
Typescript本身配置并不在ts-loader中，必须要放在工程目录下的tsconfig.json中
新建tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "sourceMap": true
  }
}
通过Typescript 和ts-loader，可以实现代码类型检查。

html-loader
用于将html文件转化为字符串并进行格式化，这使得我们可以把一个html片段通过js加载进来。

npm install html-loader
header.html
<header>
  <h1>this is header</h1>
</header>
index.js
import headerHtml from './pages/header.html'
document.write(headerHtml)
header.html 将会转化为字符串，通过document.write 插入到页面中

handlebars-loader
handlebars-loader用来处理handlebars模板，在安装时要额外安装handlebars

npm install handlebars-loader handlebars

{
      test: /\.handlebars$/,
      use: 'handlebars-loader'
}
content.handlebars
<div class="entry">
  <h1>{{ title }}</h1>
  <div class="body"> {{ body }}</div>
</div>

import contentTemplate from './handlebars/content.handlebars'
const div = document.createElement('div');
div.innerHTML = contentTemplate({
  title: 'Title',
  body: 'Your books are due next Tuesday'
});
document.body.appendChild(div)

file-loader
用于打包文件类型的资源，并返回其publicPath

npm install file-loader
  {
      test: /\.(png|jpg|gif)$/,
      use: 'file-loader'
  }
import update01 from './img/update01.png'
console.log(update01)

 {
      test: /\.(png|jpg|gif)$/,
      // use: 'file-loader',
      use: {
        loader: 'file-loader',
        options: {
          outputPath: './assets/' // outputPath 仅仅告诉 webpack 结果存储在哪里
        }
      }      
    }

import update01 from './assets/img/update01.png'
console.log(update01)
var imgElement = document.createElement('img');
imgElement.src = update01;
document.body.appendChild(imgElement);

url-loader
与file-loader作用类似，不同在于用户可以设置一个文件大小阈值，当大于该阈值时与file-loader一样返回publicPath，小鱼阈值时返回文件的base64形式编码

npm install url-loader
 {
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          outputPath: './assets/',
        }
      }
    }
import update01 from './assets/img/update01.png'
console.log(update01) // 转化得到base64形式的代码

vue-loader
可以将组建的模板、JS及样式进行拆分。在安装时，除了必要的vue与vue-loader外还要安装vue-template-compiler来编译Vue模板，以及css-loader来处理样式（如果使用scss或less仍需要对应的loader）。

npm install vue vue-loader vue-template-compiler vue-loader-plugin

const VueLoaderPlugin = require('vue-loader/lib/plugin')
{
      test: /\.vue$/,
      use: 'vue-loader'
    }

app.vue
<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      title: 'welcome'
    }
  }
}
</script>
<style lang="css">
h1 {
  color: rebeccapurple;
}
</style>

index.js
import Vue from 'vue'
import App from './pages/app.vue'
const appContainer = document.createElement('div')
document.body.appendChild(appContainer)

new Vue({
  render:(h) => h(App)
}).$mount(root)

5.如何编写一个loader
自定义loader

1.在node_modules文件夹中创建test-loader文件夹，内部在创建index.js
//node_modules/test-loader/index.js
module.exports = function(source){
  return source.replace(/test/, 'test123'); 
}
2.webpack.config.js 中进行配置
{
      test: /test\.js$/,
      use: 'test-loader'
    }
3.页面中引入test.js
// 工具函数
import { func } from './test'

created() {
    console.log(func) // 打印func方法
}
4.test.js中的内容
let func = function () {
  console.log('test')
}

export {
  func
}