webpack的loaders是一塊很重要的組成部分。我們都知道webpack是用於資源打包的，裡面的所有資源都是“模組”，內部實現了對模組資源進行載入的機制。但是Webpack本身只能處理 js模組，如果要處理其他型別的檔案，就需要使用 loader 進行轉換。  Loader 可以理解為是模組和資源的轉換器，它本身是一個函式，接受原始檔作為引數，返回轉換的結果，例如可以使用loader載入器可以快速編譯前處理器(less,sass,coffeeScript)。 Loader 可以在require()引用模組的時候新增，也可以在 webpack 全域性配置中進行繫結，還可以通過命令列的方式使用。

loader的特性是： 

loaders可以串聯，他們應用於管道資源，最後的loader將返回javascript，其它的可返回任意格式（傳遞給下一個loader）

loaders 可以同步也可以非同步

loaders在nodejs下執行並且可以做一切可能的事 loader接受引數，可用於配置裡 

loaders可以繫結到extension/RegExps 配置 

loaders可以通過npm釋出和安裝 正常的模組兒可以到處一個

loader除了 loaders可以訪問配置 外掛可以給loaders更多的特性

loaders可以釋放任意額外的檔案

安裝loader

npm install xxx-loader --save-dev

常用的loader載入器有哪些？

1.loaders之預處理

css-loader 處理css中路徑引用等問題 
style-loader 動態把樣式寫入css 
sass-loader scss編譯器 
less-loader less編譯器 
postcss-loader scss再處理

webpack.config.js的配置：

npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader //安裝
//配置
module: {
  loaders: [
    {test: /\.css$/, loader: "style!css?sourceMap!postcss"},
    {test: /\.less$/, loader: "style!css!less|postcss"},
    {test: /\.scss$/, loader: "style!css!sass|postcss"}
  ]
}
 

2.loader的 js處理

babel-loader：轉化ES6程式碼
jsx-loader：識別js中的 jsx 語法

安裝：npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader

新建一個名字為.babelrc的配置檔案：

{   
	"presets": ["es2015","react"],   
	"plugins":["antd"] 
}

webpack.config.js檔案配置：

module: {
	loaders: [
	  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
	  {test: /\.jsx$/, loader: "jsx-loader"}
    ]
}

3.其他loader載入器

url-loader: 圖片處理 npm install --save-dev url-loadr
file-loader: 檔案載入 npm install --save-dev file-loader 
json-loader：json處理 npm install --save-dev json-loader 
raw-loader： html處理 npm install --save-dev raw-loader

webpack.config.js檔案配置： 

module: {
  loaders: [
    {test: /\.(jpg|png)$/, loader: "url?limit=8192"},
    {test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,loader: 'file'},
    {test: /\.json$/,loader: 'json'},
    {test: /\.html$/,loader: 'raw'},
  ]
}

在配置module的loaders。loaders是一個數組，裡面的每一個物件都用正則表示式，對應著一種配對方案。loader載入器用於將不同的檔案載入到js檔案中，比如url-loader用於在js中載入png/jpg格式的圖片檔案；css/style loader用於載入css檔案；less-loader載入器是將less編譯成css檔案；不同的處理器通過!分隔並串聯起來。這裡的loader是可以省略掉-loader這樣的，也就是原本應該寫成style-loader!css-loader!sass-loader。