Webpack Loader简析（一）：基本概念

sherlock221 发布于2019-08-23 11:00 / 1401人阅读

摘要：需要得到最后一个产生的处理结果。这个处理结果应该是或者被转换为一个，代表了模块的源码。另外还可以传递一个可选的结果格式为对象。在异步模式中，必须调用，来指示等待异步结果，它会返回回调函数，随后必须返回并且调用该回调函数。

准备工作

安装 Node.js, 建议安装LTS长期支持版本

mkdir webpack and cd webpack and npm init -y

npm i webpack webpack-cli --save-dev

loader是什么

所谓 loader 只是一个导出为函数的 JavaScript 模块。loader runner 会调用这个函数，然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去。函数的 this 上下文将由 webpack 填充，并且 loader runner 具有一些有用方法，可以使 loader 改变为异步调用方式，或者获取 query 参数。
第一个 loader 的传入参数只有一个：资源文件(resource file)的内容。compiler 需要得到最后一个 loader 产生的处理结果。这个处理结果应该是 String 或者 Buffer（被转换为一个 string），代表了模块的 JavaScript 源码。另外还可以传递一个可选的 SourceMap 结果（格式为 JSON 对象）。
如果是单个处理结果，可以在同步模式中直接返回。如果有多个处理结果，则必须调用 this.callback()。在异步模式中，必须调用 this.async()，来指示 loader runner 等待异步结果，它会返回 this.callback() 回调函数，随后 loader 必须返回 undefined 并且调用该回调函数。

loader干了些什么

webpack loader对js代码、样式、图片等资源重新编译返回一个理想的结果，本质上说，loader是一些特殊的webpack插件，当然webpack本身有plugin的概念。默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。通过设置 raw，loader 可以接收原始的 Buffer。每一个 loader 都可以用 String 或者 Buffer 的形式传递它的处理结果。Complier 将会把它们在 loader 之间相互转换。loader 总是从右到左地被调用。

接下来我们以css-loader为例看看它的输出
创建文件如下：

-- a.css
-- index.html
-- index.js
-- webpack.config.js

a.css

#app {
  background-color: #f5f5f5;
  color: blue;
}
#app p {
  color: gray;
}

index.html


    hello webpack!
    hello loader!

index.js

const a = require("./a.css");
console.log(a);

webpack.config.js

module.exports = {
    entry: {
        main: "./index.js"
    },
    output: {
        filename: "[name].js",
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: "css-loader"
            }
        ]
    }
}

上面的代码很常见，webpack帮助我们加载.css文件。当weback在构建的过程中会根据已有配置首先将a.css作为参数交给css-loader, css-loader将会进行一系列处理输出特定的数据。实际上a.css会作为raw resource string类型的参数，有一些loader只能接受raw作为参数，例如css-loader、handlebars-loader...
执行npx webpack

可以看到，css-loader将样式代码处理成了js数组，并且我们的样式代码被处理成了字符串
修改webpack.config.js

...
module: {
    rules: [
        {
            test: /.css$/,
            use: [ "style-loader", "css-loader" ]
        }
    ]
}
...

加上style-loader，再看看输出的啥：

如你所见，style-loader将css-loader返回的样式数组一顿操作插入到html head中去了，然后他自己返回了一个空对象

loader特性之一就是：利用参数完成某个任务，不是一定有所输出，就像一个返回值为空的函数。

显然style-loader就是符合这种特性的loader之一，它与css-loader搭配起来实现了我们需要的功能。并且他们各自独立，保持小而精的运行，方便与其他loader搭配合作，比如当我想把样式代码输出为js字符串时我就会选择to-string-loader，首先安装这个新的partner，npm i to-string-loader，然后按照顺序引用它，切记顺序很重要，

...
module: {
    rules: [
        {
            test: /.css$/,
            use: [ "to-string-loader", "css-loader" ]
        }
    ]
}
...

重新构建后结果如下：

关于css-loader

css-loader使用频率比较高，它有一些配置可以帮助我们实现特定需求。

...
module: {
    rules: [
        {
            test: /.css$/,
            use: [
                "to-string-loader",
                {
                   loader: "css-loader",
                   options: {
                       url: true,        // 是否启用url(), 类似于 url(image.png)` => `require("./image.png")
                       import: true,     // 是否启用@import()加载样式
                       modules: false,   // 是否启用CSS Modules
                       localIdentName: [hash:base64],    // Configure the generated ident
                       sourceMap: false,    // Enable/Disable Sourcemaps
                       camelCase: false,    // Export Classnames in CamelCase
                       importLoaders: 0    // Number of loaders applied before CSS loader
                   } 
                }
            ]
        }
    ]
}
...

参考链接

Webpack文档 - 加载器Loaders

海外云主机服务器托管基本概念短信产品基本概念机器学习基本概念超融合架构基本概念

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96897.html

Loader学习，简析babel-loader

摘要：用来转换内容，内部调用了方法进行转换，这里简单介绍一下的原理将代码解析成，对进行转译，得到新的，新的通过转换成，核心方法在中的方法，有兴趣可以去了解一下。将函数传入参数和归并，得到。通常我们是用不上的，估计在某些中可能会使用到。什么是Loader? 继上两篇文章webpack工作原理介绍（上篇、下篇）,我们了解到Loader：模块转换器，也就是将模块的内容按照需求装换成新内容，而且每...

wpw 2019-08-26 13:35 评论0 收藏0
Webpack模块化原理简析

摘要：模块化原理简析的核心原理一切皆模块在中，，静态资源文件等都可以视作模块便于管理，利于重复利用按需加载进行代码分割，实现按需加载。模块化原理以为例，分析构建的模块化方式。 webpack模块化原理简析 1.webpack的核心原理一切皆模块：在webpack中，css,html.js，静态资源文件等都可以视作模块；便于管理，利于重复利用；按需加载：进行代码分割，实现按需加载。 2...

tracy 2019-08-20 18:24 评论0 收藏0
Webpack的坑位整理

摘要：在寻找相对路径的文件时会以为根目录，默认为执行启动时所在的当前目录。在文件被添加到依赖图中时，将其转换称为了模块。配置中的两个目标。仅限高级用途，默认情况下自动生成生成文件的文件名。webpack webpack现在是主要的打包工具了，现在网络上也有很多资料可以学习了。这里主要整理了一些基础概念，但没有所有的写，只是把之前遇到的问题记录了一下。本文的原文在我的博客中：github.com...

lidashuang 2019-05-23 17:34 评论0 收藏0
Webpack基本功能理解以及使用

摘要：在这个过程中，会用到一些解析工具用来预处理一些模块以及拓展语言例如这些工具的配置使用都是在中完成的。属性，表示进行转换时，应该使用哪个。插件接口功能极其强大，可以用来处理各种各样的任务。对于前端工程化，webpack一个神奇的工具，既然是个神奇的工具。那我们保留我们的好奇心，来聊一聊它，首先我们要搞清楚webpack到底是用来解决什么问题的，然后我们来看看它到底是怎么做的，最后来看看...

KnewOne 2019-08-26 10:09 评论0 收藏0
webpack 大法好 ---- 基础概念与配置（1）

摘要：不信你命令行里敲个试试敲敲敲当然了想直接运行命令，你需要将添加到系统变量啊。全局安装相同的，运行命令耐心等待安装完成后，你的系统变量里就存在命令了，你可以运行下试试。上诉如果有不懂的，欢迎留言。再一次见面！ Light 还是太太太懒了，距离上一篇没啥营养的文章已经过去好多天。今天为大家介绍介绍 webpack 最基本的概念，以及简单的配置，让你能快速得搭建一个可用的 webpack ...

QLQ 2019-08-20 14:41 评论0 收藏0