webpack核心特性 - loader

158 阅读3分钟

(空席)

常用加载器分类

  1. 编译转换类
  2. 文件操作类
  3. 代码检查类

编译转换类:将如css类的代码通过加载器转化为 js 代码在输出文件中以js模块的形式运行css。

文件操作类:将资源文件拷贝到输目录,然后将文件的访问路径向外导出。

代码检查类:代码质量检查,用于统一代码风格。

资源模块加载

loader 是 webpack 模块打包的核心特性。

通过不同的 loader 就可以加载不同类型的资源

webpack 内部加载器的loader 默认打包项目中的 js 文件,如果打包其他格式的文件,需要下载对应的加载器loader的插件。最终打包过后的文件都会以模块的形式打包到一个 js 文件中。

webpack默认打包原理: 微信截图_20210520104657.png

js 文件和其他格式资源文件合并打包: 微信截图_20210520104657.png 注:所有资源模块最终都会合并到一个导出的js文件中:bundle.js

css文件加载器插件

1、css-loader

功能:打包 .css 文件

下载

$ yarn add css-loader --dev

配置

// webpack.config.js
const path = require('path')

module.exports = {
    mode: 'none',                   // 指定打包后的文件的样式类型
    entry: './src/main.css',        // 指定打包入口文件
    output: {                       // 定义导出文件
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')  // 绝对路径
    },
    module: {                       // 模块加载配置
        rules: [                    // 定义配置规则
            {
                test: /.css$/,      // 定义打包以.css结尾的文件
                use: 'css-loader'   // 指定使用哪个加载器loader
            }
        ]
    }
}

2、style-loader

功能:将 css-loader 转换的结果通过style标签的形式添加到页面,css样式最终才能渲染到页面上

下载

$ yarn add style-loader --dev

配置

// webpack.config.js
const path = require('path')

module.exports = {
    mode: 'none',                   // 指定打包后的文件的样式类型
    entry: './src/main.css',        // 指定打包入口文件
    output: {                       // 定义导出文件
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')  // 绝对路径
    },
    module: {                       // 模块加载配置
        rules: [                    // 定义配置规则
            {
                test: /.css$/,      // 定义打包以.css结尾的文件  
                use: [              // 指定使用哪个加载器loader
                    'style-loader',
                    'css-loader'    // 当有多个加载器loader时,执行顺序从后往前依次执行
                ]
            }
        ]
    }
}

导入资源模块

其实 webpack 正确的打包流程(webpack打包思想)还是通过 main.js 作为打包入口文件(相当于应用的运行入口),在 js 文件中通过 import 关键字导入需要的资源文件。

原理:将css代码通过 css-loader 和 style-loader 加载器转化为js代码,在js中执行

代码:

//************ main.js ****************
import createHeading from './heading.js'
// 导入 css 资源文件
import './main.css'

const heading = createHeading()

document.body.append(heading)
//*************************************

//************ main.css ***************
body{
    color: slateblue;
    background-color: thistle;
    margin: 30px;
}
//*************************************

//************ heading.js ************
// 导入依赖的 css 文件
import './heading.css'

export default () => {
    const element = document.createElement('h1')
    element.textContent = '你好!'
    // 添加 heading.css 文件中的 heading 类名
    element.classList.add('heading')
    element.addEventListener('click', () => {
        alert('hello')
    })
    return element
}
//*************************************

//************ heading.css ************
.heading {
    padding: 10px;
    background-color: #343a40;
    color: #fff;
}
//*************************************

文件资源加载器

除了上面的可以将 css 代码可以转化为js代码执行的加载器,还有字体、图片等不能转为js代码的资源文件,webpack也有相应的文件资源加载器loader。

图片文件资源加载器

1、file-loader

工作原理:webpack 在打包时遇到了图片文件,然后根据webpack.config.js配置文件中的配置,匹配到了文件加载器,加载器导入的文件拷贝到输出目录,将文件在输出目录中的路径作为当前模块的返回值返回,导入的资源就可以被发布出去了。

下载

yarn add file-loader --dev

代码:

// 导入图片资源
import icon from './icon.png'

// 创建图片对象,添加到body
const img = new Image()
img.src = icon
document.body.append(img)

// *********** webpack.config.js 配置文件 ***************
const path = require('path')

module.exports = {
    mode: 'none',                   // 指定打包后的文件的样式类型
    entry: './src/main.js',        // 指定打包入口文件
    output: {                       // 定义导出文件
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist'),  // 绝对路径
        // publicPath: 'dist/'      // 新版本 file-loader 可以不指定默认路径
    },
    module: {                       // 模块加载配置
        rules: [                    // 定义配置规则
            {
                test: /.css$/,      // 定义打包以.css结尾的文件  
                use: [              // 指定使用哪个加载器loader
                    'style-loader',
                    'css-loader'    // 当有多个加载器loader时,执行顺序从后往前依次执行
                ]
            },
            {
                test: /.png$/,
                use: 'file-loader'
            }
        ]
    }
}

2、Data Urls:url-loader

Data Urls 特殊的资源形式,通过 url 的形式表示一个文件资源。

原理:同 file-loader 加载器工作原理,只不过导出时资源形式不同。

格式: 微信截图_20210520193208.png 示例:

微信截图_20210520193208.png

下载

yarn add url-loader --dev

配置

配置:use: 'url-loader'

rules: [                    // 定义配置规则
            {
                test: /.css$/,      // 定义打包以.css结尾的文件  
                use: [              // 指定使用哪个加载器loader
                    'style-loader',
                    'css-loader'    // 当有多个加载器loader时,执行顺序从后往前依次执行
                ]
            },
            {
                test: /.png$/,
                use: 'url-loader'
            }
        ]

输出:以url的形式展示资源文件

<img src="data:image/png;base64,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">

url-loader 使用的最佳实践:

小文件使用 url-loader 加载器的方式渲染,减少服务器的请求次数;
大文件通过 download 的方式提高加载速度。

代码:

rules: [                    // 定义配置规则
            {
                test: /.png$/,
                // use: 'url-loader'
                use:{
                    loader: 'url-loader',
                    options: {
                        limit: 10 * 1024  // 10 kb
                    }
                }
            }
        ]

通过配置文件中的 options 配置选项中 limit 属性,指定小于10KB的图片通过 url-loader 加载,而超过10KB的图片,url-loader 加载器还是给 file-loader 去处理(前提是两个 loader 都需要下载,以满足不同大小的文件)

webpack ES6语法转换loader

插件:babel-loader,同时需要这个loader缩依赖的loader:@babel/core@babel/preset-env

实现将ES6+新语法转换为对浏览器更友好的ES5版本语法

安装:

yarn add babel-loader @babel/core  @babel/preset-env --dev

配置:

 rules: [                    // 定义配置规则
            {
                test: /.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
         ]