可以访问 这里 查看更多关于大数据平台建设的原创文章。

webpack系列之loader及简单的使用

一. loader有什么用

webpack本身只能打包Javascript文件,对于其他资源例如 css,图片,或者其他的语法集比如jsx,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。

比如
你的工程中,样式文件都使用了less语法,是不能被浏览器识别的,这时候我们就需要使用对应的loader,来把less语法转换成浏览器可以识别的css语法。

例如一个简单的less文件:
转换前:

.demo {
width: 200px;
height: 100px;
margin: auto;
border: 1px solid;
p {
font-weight:bold;
padding-left: 30px;
}
}

转换后:

.demo {
width: 200px;
height: 100px;
margin: auto;
border: 1px solid;
} .demo p {
font-weight: bold;
padding-left: 30px;
}

后面的案例也是拿这个less文件来做演示的。

二. loader是什么

先来看一下官方对loader的一个解释:

A loader is a node module exporting a function

翻译过来:loader就是一个export出来的function


既然是 node module,所以如果你自己要自定义一个loader,完全可以这么写:

module.exports = function (source) {
// todo
}

解释

  • 其中source参数是这个loader 要处理的源文件的字符串

  • 返回经过**"翻译"**后的webpack 能够处理的有效模块

如果你所写的 loader 需要依赖其他模块的话,那么同样以 module 的写法,将依赖放在文件的顶部引进来即可:

var fs = require("fs")
module.exports = function (source) {
// todo
}

如果你希望将处理后的结果(不止一个)返回给下一个 loader,那么就需要调用 webpack 所提供的 API

由于本篇我们只讲loader的基本使用,故这里不再深入讲解,有兴趣的可以点击这里学习。

三. 使用loader

在看了前面的介绍后,接下来给大家介绍一下怎么使用loader

使用loader的方式

有三种使用方式,如下:

  • 配置(推荐):在 webpack.config.js 文件中指定 loader

  • 内联:在每个 import 语句中显式指定 loader

  • CLI:在 shell 命令中指定它们。


以上三种方式,我们在开发过程中推荐使用第一种方式:

比如你想使用webpack来打包样式文件,则可以在webpack.config.js里添加如下代码:

   module: {
rules: [
{
test: /\.css$/, // 正则匹配所有.css后缀的样式文件
use: ['style-loader', 'css-loader'] // 使用这两个loader来加载样式文件
}
]
}

module.rules 允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式,并且有助于使代码变得简洁。

上述rules的作用:
webpack在打包过程中,凡是遇到后缀为css的文件,就会使用style-loadercss-loader去加载这个文件。

四.案例

在对loader有了一个大概的认识后,来做一个小案例,需求如下:

将上一篇(webpack系列之基本概念和使用)的demo输出文字居中并用黑框圈起来

目录结构

代码目录结构如下:
├── node_modules
├── app
│ ├── bundle.js
│ └── index.html
├── package-lock.json
├── package.json
├── src
│ ├── index.js
│ └── main.less
└── webpack.config.js

1. 安装loader

我们必须使用 loader 告诉 webpack 加载 less 文件,为此,需要首先安装相对应的 loader

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

这些loader的作用如下:

  • 安装less-loader后可以在js中使用require的方式来加载less文件了;

  • 安装css-loader后可以在js中加载css文件;

  • 安装style-loader的目的是为了让加载的css作为style标签内容插入到html中。

2. 配置loader

webpack.config.js代码如下:

module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/src/index.js", //入口文件
output: {
path: __dirname + "/app", //打包后的文件存放的地方
filename: "bundle.js" //打包后输出文件的文件名
},
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader','css-loader', 'less-loader']
}
]
}
}

3.新建样式文件

main.less代码如下:

.demo {
width: 200px;
height: 100px;
margin: auto;
border: 1px solid;
p {
font-weight:bold;
padding-left: 30px;
}
}

4. 修改入口文件

在入口文件index.js里引入我们的样式文件

require ('./main.less');
var element = document.createElement('div');
element.className = 'demo';
var p = document.createElement('p');
p.innerText = 'webpack系列之loader的基本使用!';
element.appendChild(p);
document.body.appendChild(element);

5.打包

在项目根目录(webpack-demo)下执行打包命令:

➜  webpack-demo webpack

打包成功,会输出如下:

Hash: 1bb51c6a348686a223db
Version: webpack 3.10.0
Time: 1077ms
Asset Size Chunks Chunk Names
bundle.js 53.8 kB 0 [emitted] main
[0] ./src/index.js 273 bytes {0} [built]
[2] ./src/main.less 1.19 kB {0} [built]
[2] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js!./src/main.less 304 bytes {0} [built]

6. 查看结果

在浏览器里刷新index.html
你会发现输出的文字被一个黑框给圈了起来,并且加粗显示,这就表明我们的样式文件已经生效了,而且从截图当中也可以看见样式文件也插入到了html中。
![图片描述][3]

五.常用loader

样式

  1. css-loader : 解析css文件中代码

  2. style-loader : 将css模块作为样式导出到DOM

  3. less-loader : 加载和转义less文件

  4. sass-loader : 加载和转义sass/scss文件

脚本转换编译

  1. script-loader : 在全局上下文中执行一次javascript文件,不需要解析

  2. babel-loader : 加载ES6 代码后使用Babel转义为ES5后浏览器才能解析

Files文件

  1. url-loader : 多数用于加载图片资源,超过文件大小显示则返回data URL

  2. raw-loader : 加载文件原始内容(utf-8格式)

加载框架

    1. vue-loader : 加载和转义vue组件

    2. react-hot-loader : 动态刷新和转义react组件中修改的部分

webpack系列之loader的基本使用的更多相关文章

  1. Webpack系列-第三篇流程杂记

    系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记 前言 本文章个人理解, 只是为了理清webpack流程, 没有关注内部过多细节 ...

  2. 【webpack 系列】基础篇

    Webpack 基础篇 基本概念 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每 ...

  3. 【webpack 系列】进阶篇

    本文将继续引入更多的 webpack 配置,建议先阅读[webpack 系列]基础篇的内容.如果发现文中有任何错误,请在评论区指正.本文所有代码都可在 github 找到. 打包多页应用 之前我们配置 ...

  4. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

  5. vue 快速入门 系列 —— vue loader 下

    其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...

  6. vue 快速入门 系列 —— vue loader 扩展

    其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...

  7. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

  8. Webpack系列-第一篇基础杂记

    前言 公司的前端项目基本都是用Webpack来做工程化的,而Webpack虽然只是一个工具,但内部涉及到非常多的知识,之前一直靠CV来解决问题,之知其然不知其所以然,希望这次能整理一下相关的知识点. ...

  9. 全网最贴心webpack系列教程和配套代码

    webpack-demos:全网最贴心 webpack 系列教程和配套代码 欢迎关注个人技术博客:godbmw.com.每周 1 篇原创技术分享!开源教程(webpack.设计模式).面试刷题(偏前端 ...

随机推荐

  1. 基于Vue的UI框架element el-table表格的自定义排序

    html部分: <el-table-column prop="phoneCache" label="手机缓存包编号" align="center ...

  2. Android Studio报错问题集锦

    Android Studio使用过程中坑太多,动不动就报错,每次出现问题都是上百度去搜索,需要花费很大的时间和精力才能解决掉问题. 为了以后更高效的使用这款工具,在这里记录下来我已经踩过的坑和即将要踩 ...

  3. 【题解】cf1381c Mastermind

    序 (一道很考验思维质量的构造好题,而且需要注意的细节也很多.) 本题解主体使用的是简洁且小常数的\(O(nlogn)\)时间复杂度代码,并且包含其他方法的分析留给读者自行实现(其实是自己不会写或者写 ...

  4. django表单使用

    一.表单常用字段类型及参数 表单可以自动生成html代码,每一个字段默认有一个html显示样式,大多数默认为输入框. 字段相当于正则表达式的集合,能够对表单传入的数据进行校验,并且某一部分校验失败时会 ...

  5. SpringBoot整合Mail发送邮件&发送模板邮件

    整合mail发送邮件,其实就是通过代码来操作发送邮件的步骤,编辑收件人.邮件内容.邮件附件等等.通过邮件可以拓展出短信验证码.消息通知等业务. 一.pom文件引入依赖 <dependency&g ...

  6. 无线网络安全攻防实战进阶(杨哲) PDF|网盘下载内附提取码|

    面对当前国内企事业单位及soho无线网络的飞速发展.智能手机等便携式设备的广泛使用.无线网络犯罪案例日益递增的发展现状,<无线网络安全攻防实战进阶>作为<无线网络安全攻防实战> ...

  7. Python里的目录方法

    Python里的目录_文件.目录相关的方法: mkdir(目录名): 在当前目录下创建新的目录 程序: import os # 创建新的目录-包结构 os.mkdir('新目录-test') getc ...

  8. Seaborn基础2

    import matplotlib.pyplot as plt import seaborn as sns import numpy as np def sinplot(flip = 1): x = ...

  9. ElasticSearch 基础入门 and 操作索引 and 操作文档

    基本概念 索引: 类似于MySQL的表.索引的结构为全文搜索作准备,不存储原始的数据. 索引可以做分布式.每一个索引有一个或者多个分片 shard.每一个分片可以有多个副本 replica. 文档: ...

  10. luogu P5325 Min_25筛

    LINK:Min_25筛 新版感觉有点鬼畜 而且旧版的也够用了至少. 这个并不算很简单也不算很困难的知识点 学起来还是很麻烦的. (误入了很多dalao的blog 说的云里雾里的 甚是懵逼 这里推荐几 ...