Webpack入门之loader篇

什么是LOADER

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

loader的官方定义：

A loader is a node module exporting a function

LOADER的使用

这里只使用配置方法，也就是在webpack.config.js中指定loader。

举一个例子，css-loader和style-loader

module:

 { rules: [ {

 test: /\.css$/, // 正则匹配所有.css后缀的样式文件 

use: ['style-loader', 'css-loader'] // 使用这两个loader来加载样式文件

 } ]

 }

上述rules的作用：

webpack在打包过程中，凡是遇到后缀为css的文件，就会使用style-loader和css-loader去加载这个文件。

现在做一个案例：

将上一篇的demo输出文字居中并用黑框圈起来。

首先修改的是webpack.config.js，也就是要配置loader.

这里rules的作用是将所有.less后缀名的文件通过style-loader,css-loader和less-loader三个loader模块化。

因为需要用到这3个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中。

然后我们在app文件夹下（跟入口文件main.js同一个文件夹）创建一个.less文件

打开入口文件main.js，依顺序可找到Greeter.js，修改Greeter.js,最主要是依据.less文件中.demo来增加以下红框划出的这句，另外也要使用require（)来引入main.less文件。

好了，大功告成，现在只需要webpack一下打包就行（当然你也可以使用npm run server)。

参考文献：

webpack系列之loader的基本使用

常用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组件中修改的部分