webpack简易教程之loader

MobService 发布于2019-08-21 17:51 / 1942人阅读

摘要：一组链式的将按照先后顺序进行编译。在最后一个，返回所预期的。运行在中，并且能够执行任何可能的操作。用于对传递配置。分开的每个部分都相对于当前目录解析。

webpack自称能够打包任何文件，这句话咋听一下好像在吹牛逼，因为webpack本身只能理解JavaScript。但是由于webpack中有loader的存在，可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用webpack的打包能力对它们进行处理————前提是要有对应的loader存在

Loader特性

loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。

loader 可以是同步的，也可以是异步的。

loader 运行在 Node.js 中，并且能够执行任何可能的操作。

loader 接收查询参数。用于对 loader 传递配置。

loader 也能够使用 options 对象进行配置。

除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。

插件(plugin)可以为 loader 带来更多特性。

loader 能够产生额外的任意文件。

当然，上面这些特性暂时看不明白也没关系，学会如何使用才是重点。所以重点看如何使用Loader

使用Loader

下面是常见的webpack配置的基本结构：

const path = require("path")

module.exports = {
    entry: "./src/index.js",
    output:{
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    module:{
        ...
    }
}

其中entry用来设置webpack的入口文件，output是用来设置打包后的文件输出位置以及相应的文件名。这里就不详细介绍，下面我们来看一下常见的loader配置：

在文件中配置

const path = require("path")

module.exports = {
    entry: "./src/index.js",
    output:{
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    module:{
        rules:[
            {
                test: /.css$/,
                use: ["style-loader","css-loader"]
            },
            {
                test: /.sass$/,
                use: ["sass-loader","node-sass"]
            },
            {
                test: /.(png|jp?eg|gif)$/,
                use: ["file-loader"]
            },
            {
                test: /.json$/,
                use: ["json-loader"]
            },
            {
                test: /.txt$/,
                use: ["raw-loader"]
            }
        ]
    }
}

rules数组里面的每个对象都对应着一个匹配规则，从上到下分别匹配.css文件，.sass文件，图片文件，.json文件以及.txt文本文件
另外，在运行之前千万记得要安装对应的依赖，示例：

npm install css-loader style-loader --save-dev

直接导入

可以在 import 语句或任何等效于 import 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。?后面可以传递参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}

import Styles from "style-loader!css-loader?modules!./styles.css";

通过CLI使用loader

示例：webpack --module-bind jade-loader --module-bind "css=style-loader!css-loader"

以上三种配置方式，第一种应该用的比较多，毕竟配置也比较方便...

总结

在配置loader的时候尽量使用文件进行配置，并且可以在官方文档找到相应的loader，具体的参数传入可以在npm官网上找到，可以根据具体的需求来设置

扫描下方的二维码或搜索「tony老师的前端补习班」关注我的微信公众号，那么就可以第一时间收到我的最新文章。

云服务器 GPU云服务器 webpack教程 webpack4教程 python简易教程 javascript简易教程

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

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

webpack 简易配置入门教程

摘要：使用等预处理器编写可以将你项目中的所有文件，处理成浏览器能识别的文件。测试打包基本的配置就完成了。修改处理文件执行顺序是从右到左修改一下入口文件中的样式引入打包测试完美通过。这时可以使用提供的配置来使引入文件的时候变得更加方便简单。 showImg(https://segmentfault.com/img/remote/1460000010844617); 本文正文链接最近公司弄了个...

JackJiang 2019-08-20 18:56 评论0 收藏0
webpack源码分析之三：loader

摘要：本次介绍的则是用来解决这类问题的。实现模块实现思路将配置内的命令的的内联从前至后组成一个数组。所有字符串内部又可以截取，获取完整的。分析并解析该数组内的字符串，获取各个的绝对路径。前言在webpack特性里面，它可以支持将非javaScript文件打包,但前面写到webpack的模块化打包只能应用于含有特定规范的JavaScript文件。本次介绍的loader则是用来解决这类问题的...

laznrbfe 2019-08-26 12:01 评论0 收藏0
Webpack系列——手把手教你使用Webpack搭建简易的React开发环境

摘要：在这篇文章中我们开始利用我们之前所学搭建一个简易的开发环境，用以巩固我们之前学习的知识。文章首发于我的github及个人博客，github请看https://github.com/huruji/blo...，转载请注明出处。在这篇文章中我们开始利用我们之前所学搭建一个简易的React开发环境，用以巩固我们之前学习的Webpack知识。首先我们需要明确这次开发环境需要达到的效果：1、...

cucumber 2019-08-22 11:06 评论0 收藏0
随我来基于webpack构建一个简易的vue脚手架 (webpack系列二)

摘要：构建文件清理构建目录下的文件打包工具编译文件模板函数编译与配合使用入口处理项目中的不同类型的模块。前言之前有写了一篇webpack的文章(认识篇) 猛戳,大家对于webpack基本概念(entry,output,loader,plugin,mode...)应该是有了较模糊的认识.今天希望在通过(对于vue-cli的效仿)搭建一个自己的脚手架的途中对于概念会有更深刻的认识. 目录 1...

tomorrowwu 2019-08-23 13:05 评论0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件开发前端掘金作者原文地址译者插件是为应用添加全局功能的一种强大而且简单的方式。提供了与使用掌控异步前端掘金教你使用在行代码内优雅的实现文件分片断点续传。 Vue.js 插件开发 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins译者：jeneser Vue.js插件是为应用添加全局功能的一种强大而且简单的方式。插....

izhuhaodev 2019-08-21 11:44 评论0 收藏0