关于前端:Loader-加载器

23次阅读

共计 841 个字符，预计需要花费 3 分钟才能阅读完成。

原文链接：https://note.noxussj.top/?source=sifo

loader 用于对模块的源代码进行转换。loader 能够使你在 import 或 ” load (加载)” 模块时预处理文件。因而，loader 相似于其余构建工具中 ” 工作 (task)”，并提供了解决前端构建步骤的得力形式。loader 能够将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至容许你间接在 JavaScript 模块中 import CSS 文件！

Loader 是 webpack 的外围个性，借助于 Loader 能够加载任何类型的资源，Loader 的工作原理就是负责资源文件从输出到输入的转换。

css-loader

把 css 代码增加到 js 模块中。

style-loader

把 js 模块的 css 代码增加到页面头部的 style 下面。

file-loader

大多数 loader 都像 css-loader 一样把资源模块转换为 js 代码的实现形式去工作，然而相似于图片、字体这些文件都是无奈通过 js 的形式去示意的，所以须要用到 file-loader。

url-loader

file-loader 是将资源文件以文件的模式转到 dist 目录中。而 url-loader 是将资源文件转成 base64 的模式写在 js 中。然而文件体积过大会导致打包后的 js 过大，加载累赘更大。url-loader 如果应用 limit, 则必须装置 file-loader。

html-loader

在 js 中加载 html 文件，html 的文件资源也能够应用 loader。

webpack.config.js

module.exports = {
    module: {
        rules: [{ test: /\.css$/, use: 'css-loader'},
            {test: /\.ts$/, use: 'ts-loader'}
        ]
    }
}

原文链接：https://note.noxussj.top/?source=sifo

正文完