正文
webpack系列之loader的基本使用
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
可以访问 这里 查看更多关于大数据平台建设的原创文章。
webpack系列之loader及简单的使用
一. loader有什么用
webpack
本身只能打包
Javascript
文件，对于其他资源例如
css
，图片，或者其他的语法集比如
jsx
，是没有办法加载的。 这就需要对应的
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-loader
和
css-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
样式
-
css-loader : 解析
css文件中代码 -
style-loader : 将
css模块作为样式导出到DOM中 -
less-loader : 加载和转义
less文件 -
sass-loader : 加载和转义
sass/scss文件
脚本转换编译
-
script-loader : 在全局上下文中执行一次
javascript文件，不需要解析 -
babel-loader : 加载
ES6代码后使用Babel转义为ES5后浏览器才能解析
Files文件
-
url-loader : 多数用于加载图片资源,超过文件大小显示则返回
data URL -
raw-loader : 加载文件原始内容
(utf-8格式)
加载框架
-
vue-loader : 加载和转义
vue组件 -
react-hot-loader : 动态刷新和转义
react组件中修改的部分
