webpack配置与使用——loader相关

最新推荐文章于 2024-03-29 03:24:08 发布

itxcr

最新推荐文章于 2024-03-29 03:24:08 发布

阅读量242

点赞数

xcr

本文链接：https://blog.csdn.net/it_xcr/article/details/103197707

版权

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中进行的，有的时候许多目录层次很深的文件也要对其他文件进行引入，使用@符号会极大方便项目的开发，方便文件移植。