Loader 用于对模块的源代码进行转换。loader 可以使你在 require() 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你在 JavaScript 中 require（） CSS文件！
**简单来说，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）预处理函数，为 JavaScript 生态系统提供了更多有力功能。用户现在可以更加灵活的引入细粒度逻辑，例如压缩(compression)、打包(package)、语言翻译(language translation)和其他更多。
## 使用babel-loader
### 1.新建文件目录
### 2.配置webpack.config
~~~javascript
var path = require('path'); //webpack2.0以后，路径需要引用这个模块
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-bundle.js'
},
module:{
rules:[{
test: /\.js$/, //正则匹配所有js文件
exclude: /node_modules/, //排除node_modules文件夹下的js
use:{
loader: 'babel-loader', //使用babel-loader处理找到的js文件
options: { ////采用babel-loader的"es2015"规则将找的js为浏览器可识别的js
presets: ['es2015'],
plugins: ['transform-remove-strict-mode']
}
}
}]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'This is my plugin title.'
})
]
}
~~~
**模板index.html**
~~~html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
</body>
</html>
~~~
**app.js**
~~~
const App = () => {
console.log('app测试');
}
~~~
### 3.安装loader和plugin
在生成之前我们要先用npm安装我们需要的loader和plugin，安装方式查阅[Babel官方](http://babeljs.io/docs/setup/#installation)
~~~
npm install --save-dev babel-loader babel-core
npm install --save-dev babel-cli babel-preset-es2015
npm install --save-dev babel-plugin-transform-remove-strict-mode
~~~
### 4.成功生成的main-bundle.js 和 index.html
~~~javascript
/* 0 */
/***/ (function(module, exports) {
var App = function App() {
console.log('app测试');
};
/***/ })
/******/ ]);
~~~
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
This is my plugin title.
</title>
</head>
<body>
<script type="text/javascript" src="js/main-bundle.js"></script></body>
</html>
~~~
## 通过packge.json配置
### 1.npm初始化文件目录
~~~
npm init
~~~
一路enter下去之后，发现多处了一个package.json文件。
### 2.配置package.json
在这个文件中我们可以看到之前安装过的如babel-loader、webpack等工具，参考[Babel官方](http://babeljs.io/docs/setup/#installation)添加“babel”一项配置即可。
~~~javascript
{
"name": "webpackdemo6",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"babel":{
"presets": ["es2015"],
"plugins": ["transform-remove-strict-mode"]
},
"dependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-remove-strict-mode": "^0.0.2",
"babel-preset-es2015": "^6.24.1",
"html-webpack-plugin": "^2.29.0",
"webpack": "^3.3.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
~~~
成功生成后可以看到结果与我们用webpack的loader生成的是一样的。
## 通过.babelrc配置
### 1.新建.babelrc文件
~~~javascript
{
"presets":[
"es2015"
],
"plugins":[
"transform-remove-strict-mode"
]
}
~~~
### 2.修改webpack.config（去掉use下的presets和plugins即可）
~~~javascript
var path = require('path'); //webpack2.0以后，路径需要引用这个模块
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-bundle.js'
},
module:{
rules:[{
test: /\.js$/, //正则匹配所有js文件
exclude: /node_modules/, //排除node_modules文件夹下的js
use:{
loader: 'babel-loader', //使用babel-loader处理找到的js文件
}
}]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'This is my plugin title.'
})
]
}
~~~
以上三种打包生成的结果是一样的，而且bundle.js的内容也没有“use strict”，证明plugin都生效了。
## 优化速度
如果文件项目比较大，我们发现了运行完打包命令后，很长时间才能看到打包的结果，那是因为我们没有给babel-loaders指定待打包的文件路径，导致它需要在整个目录下一个一个寻找，下面我们来优化下打包的时间,修改webpack的打包配置文件webpack.config.js,内容如下:
~~~javascript
var path = require('path'); //webpack2.0以后，路径需要引用这个模块
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-bundle.js'
},
module:{
rules:[{
test: /\.js$/, //正则匹配所有js文件
include: path.resolve(__dirname,'src'), //指定babel-loaders寻找的文件路径，注意需是绝对路径
exclude: path.resolve (__dirname, 'node_modules'), //排除node_modules文件下js，注意需是绝对路径
use:{
loader: 'babel-loader', //使用babel-loader处理找到的js文件
}
}]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body',
title: 'This is my plugin title.'
})
]
}
~~~
