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.'
})
]
}
~~~
