webpack配置与使用——loader相关

loader相关

• 介绍：
  • loader是webpack编译处理不同类型文件的工具(本质是函数)
  • css文件对应 style-loader、 css-loader
  • less文件对应 style-loader、 css-loader、 less-loader
  • img文件对应 url-loader 、file-loader
  • ​ es6、es7文件对应 babel-loader

1. CSS

• 安装、配置、应用css相关loader

• 安装loader相关依赖包
  yarn add -D css-loader style-loader

• 在webpack.config.js中给loader做如下配置

  module.exports = {
    // 给webpack配置各种loader
    module: {
      rules: [
        {
          // css的loader配置
          // 正则匹配名字以.css结尾的文件，然后交给如下loader处理
          test: /\.css$/, 
          use: ['style-loader', 'css-loader'],
        }
      ]
    }
  }
  

• 注意：

  • style-loader、css-loader有严格的前后设置顺序，不要颠倒
  • 有的文件需要配置一个loader、有的需要配置多个，不固定

两个loader解读

• css-loader ：该loader可以实现在主入口js文件中以import/require的方式引入css
• style-loader ：该loader可以实现在html运行文档中以style标签的形式嵌入css 内容，使得样式生效
• css-loader第一个顺序执行，style-loader之后再执行

2. 图片

• 安装、配置、应用图片相关loader

• 安装loader相关依赖包
  yarn add -D url-loader file-loader

• 在webpack.config.js中给loader做如下配置

  module.exports = {
      // 给webpack配置各种loader
    module: {
      rules: [
        {
          // img图片loader配置
          test: /\.(png|jpg|gif)$/i,
          loader: 'url-loader',
          options: {
            limit: 8192
          }
        }
      ]
    }
  }
  

• file-loader不需要配置，条件满足会自动调用

loader解读

• file-loader 把符合条件的图片文件重新打包生成在dist目录
• url-loader:负责把图片变为字符串使用，并嵌入到应用文档里边，好处：可以节省一个http请求资源
• limit作用：
  • 文件大小 大于limit:8192 字节的，就走 file-loader，
  • 文件大小 小于等于8192 字节的，就走 url-loader
  • url-loader limit:8192(8k)是判断图片大小的阈值，该阈值建议大小是10k左右
• 注意：
  • index.html模板里边设置的**<img>标签图片**不能被webpack处理
  • 大小大于10kb的图片不适合变为字符串，不划算，因为图片变为字符串后，大小会更大
• 大图片(大于8192字节)：重新生成在dist目录，名字会重新定义
• 小图片(小于等于8192字节)：以base64格式字符串集成到打包的bundle.js文件里边，之后以style标签方式植入到运行应用文件里边，本身不会消耗http资源

创建子级目录存储图片

• 在dist里边创建子级目录，存储生成好的大图片

• 给url-loader配置参数，具体如下：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpg|gif)$/i,
          loader: 'url-loader',
          options: {
            limit: 8192,
            outputPath:'image' // 创建子级目录存储生成的图片
          }
        }
      ]
    }
  }
  

• 经过上述配置，再次yarn build后,大图片就被存储到 dist/image 目录里边去了

• outputPath本身是file-loader的参数，但是可以给url-loader配置，它们内部会自动传递

base64格式字符串说明

• Base64是一种基于64个可打印字符来表示二进制数据的方法，是二进制数据的封装
• 一个图片最本质的内容是二进制数据，当前应用级别无法直接表示，需要借助base64格式

loader配置介绍

	// 没有参数的 1个或多个 加载器配置(use方式)
{ test: /\.格式$/, use: 加载器 },				    //1个
{ test: /\.格式$/, use: [加载器,加载器] },	//多个 数组元素 

  // 没有参数的 1个或多个 加载器配置(loader方式)
{ test: /\.格式$/, loader: 加载器},			    //1个
{ test: /\.格式$/, loader: 加载器!加载器},	//多个 !叹号分隔

	// 有参数的 1个或多个 加载器配置
{ test: /\.格式$/, loader: 加载器, options:对象参数}, //1个
{ test: /\.格式$/, 
  use:[
    {loader: 加载器, options:对象参数},
    {loader: 加载器, options:对象参数},
    ...
  ]
}, //多个

3. less

• 安装、配置、应用less相关loader

• 安装loader相关依赖包
  yarn add -D less-loader less

• 在webpack.config.js中给loader做如下配置

  module.exports = {
      // 给webpack配置各种loader
    module: {
      rules: [
        {
          // less的loader配置
          test: /\.less$/,
          use:['style-loader','css-loader','less-loader']
        }
      ]
    }
  }
  

• rules是一个组别，里边可以为不同类型文件配置对应的loader

• style-loader、css-loader、less-loader需要一并配置，并且它们有严格的前后设置顺序，不能颠倒，而执行顺序恰好相反，less-loader第一个，css-loader第二个，style-loader是第三个

loader解读

• less-loader：处理less内容为css内容，css内容再交给css-loader和style-loader处理
• css-loader :该loader可以实现在主入口main.js文件中以import/require的方式引入css (less)
• style-loader ：该loader可以实现在html运行文档中以style标签的形式嵌入css 内容
• less文件内容被less-loader转变为普通css内容，并嵌入到打包文件(dist/bundle.js)中
• bundle.js文件会创建一个style标签，并植入到应用html文档中，使得css(less)样式生效

4. es6

不同类型文件在webpack中都有不同的loader做解析处理，es6高级标准对应loader的名称为“babel-loader”，单这个loader也不做具体事宜,其需要配置preset

在webpack中，不同类型的es6高级语法做降级处理都有独立的工具做编译转换处理，这个工具称为plugin

注意：

• webpack本身有功能扩展插件plugin，例如html-webpack-plugin
• babel-loader也有plugin的概念，它们各说各的，彼此没有关系

• 安装、配置、应用es6相关loader和preset

• babel-loader的官网：https://babel.docschina.org/

• 安装loader相关依赖包
  yarn add -D babel-loader @babel/core @babel/preset-env

• 在webpack.config.js中给loader做如下配置

  module.exports = {
    module: {
      rules: [
        {
          // 处理es6高级语法的loader配置
          test: /\.js$/, // 匹配js文件，交给如下loader处理
          exclude: /node_modules/, // 排除指定目录不处理
          use: 'babel-loader',
        }
      ]
    }
  }
  

• 在项目根目录创建babel.config.js文件，里边配置如下内容：

  // 配置，使得babel-loader可以找到preset
  //       preset可以找到plugin
  module.exports = {
    presets: ['@babel/preset-env']
  }
  

• 一共要安装3个功能包

  • babel-loader
  • @babel/core 是内部依赖
  • @babel/preset-env是许多常用plugin的集合
  • @符号就是普通名字组成部分而已

• babel-loader找到preset有3种方式

  • webpack.config.js配置文件
  • .babelrc配置文件
  • babel.config.js 配置文件 【 推荐】使用

5. ttf字体

给项目文字应用指定ttf字体

/*给p标签内容设置指定的字体库*/
/*定义一个字体库*/
@font-face{
  font-family: 'cloud';
  src:url('../font/STCAIYUN.TTF');
}
/*页面元素应用字体库*/
p{font-family: 'cloud'}

• 配置、应用字体相关loader

• 在webpack.config.js中给loader做如下配置

  module.exports = {
    module: {
      rules: [
        {
          // 处理字体库文件 的loader配置
          test:/\.(ttf|eot|otf|woff|svg)$/i,
          loader: 'url-loader',
          options: {
            limit: 10000, // 10k大小的阀值
            outputPath: 'fonts' // 为存储生成的字体库文件设置子级目录
          }
        },
      ]
    }
  }
  

• 原理：

  • 大字体库文件，会被file-loader解析处理，在dist/fonts目录重新生成出来，并重新起名字
  • 小字体库文件，会被url-loader解析处理变为base64格式字符串，直接嵌入到 dist/bundle.js 文件中，并以style标签方式植入的应用程序文档(dist/index.html)中
    • 一般的字体库文件大小都是好几M的，因此小字体库文件处理原理可以忽略

• 注意：

  • tf等字体库文件需要的loader 与 img图片的一样，就是url-loader和file-loader
  • url-loader配置limit和outputPath参数
  • 字体库文件格式有许多，例如 ttf、eot、woff、svg等
  • font-face可以通过多个字体库文件定义多个

6. @别名和默认后缀

给webpack配置@符号路径别名、默认文件后缀名字

• 在webpack.config.js中做如下配置

  const path = require('path')
  module.exports = {
    resolve: {
      alias: {
        // 配置别名
        '@': path.resolve('./src'),
      },
      // 配置自动识别后缀名
      extensions: [
        '.js',
        '.vue',
        '.json',
        '.css',
        '.less'
      ],
    },
  }
  

• 现在在src/main.js中就可以使用@符号，代表src目录绝对路径名,被引入各种类型文件的后缀名字也可以省略了

• 注意：

  • 项目中应用程序文件的彼此引入操作并不都是在src/main.js中进行的，有的时候许多目录层次很深的文件也要对其他文件进行引入，使用@符号会极大方便项目的开发，方便文件移植。