Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。
Loader 可以理解為是模塊和資源的轉換器，它本身是一個函數，接受源文件作為參數，返回轉換的結果。這樣，我們就可以通過 require 來加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。
Loader 可以在 require() 引用模塊的時候添加，也可以在 webpack 全局配置中進行綁定，還可以通過命令行的方式使用。
下面的例子是這篇文章的續篇：webpack前端構建工具學習總結（一）之webpack安裝、創建項目
1.在hello.js中通過require引用style.css，執行webpack hello.js hello.bundle.js，報錯如下圖：
報錯提示需要一個loader轉換器來處理css樣式
2.輸入命令：npm install css-loader style-loader --save-dev，來安裝css的loader轉換器和style的loader轉換器
安裝完成后，輸入命令：webpack hello.js hello.bundle.js，進行編譯hello.js
運行發現仍然發現報錯
3.查看引入style.css的地方，webpack只能處理javascript模塊，處理css需要借助於loader轉換器
在 require() 引用模塊的時候添加loader轉換
那么在require引入style.css文件時，就需要css-loader轉換。require('css-loader!./style.css');
在進行編譯打包hello.js，編譯打包成功
查看hello.bundle.js文件，多出了css樣式這一塊，並且css樣式為一獨立模塊
4.在項目目錄下新建一個index.html，並且引入hello.js打包后的hello.bundle.js
5.修改hello.js，運行hello()函數，接着再編譯一次hello.js到hello.bundle.js
6.運行index.html
頁面上彈出“hello world！”
7.但是我們發現頁面的背景色並沒有變成ccc的樣式，要想讓css樣式生效，還需要在require引入css的時候使用style-loader
require('style-loader!css-loader!./style.css');
編輯完后再用webpack編譯打包
8.刷新index頁面，頁面變成了ccc的背景色
發現style.css中的樣式被使用style標簽插入到了head里面，這是由style-loader實現的
css-loader是允許webpack識別.css的文件
style-loader是將webpack識別完的css文件中的內容，在編譯完運行文件的時候，將這些css用style標簽包起來嵌在head內
上面的例子講述的都是在require引入模塊的時候添加的loader轉換，還有一種方式就是在命令行中添加loader，其他和上面講述一樣
在命令行中添加loader
在命令行中輸入命令：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'(git bash中執行相當於linux，如在windows下的cmd估計要將單引號換成雙引號)
去掉hello.js中require時添加的loader依賴，並將上面的命令進行編譯
每次修改完文件進行編譯時都需要寫命令，很是繁瑣，在命令最后加上--watch，當文件有變化時，就會自動編譯
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch
當修改hello.js文件保存后，就會看到命令行上已經重新編譯
刷新index.html就可以看到修改后的內容了
webpack其他命令介紹：
--progress：當前打包的進度條
--display-modules：打包的模塊，依賴什么而打包也會列出來
--display-reasons：打包模塊的原因，因為什么打包
輸入完整命令：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons --watch
當檢測到文件有變化時進行編譯，編譯輸出包括打包進度、打包模塊、打包原因
這個博客寫的也很詳細，值得學習：http://blog.csdn.net/keliyxyz/article/details/51579078
總結
loader的安裝：npm install xxx-loader -save-dev
loader的三種用法：
1.require()（本文均由講述）
2.在配置文件webpack.config.js中通過module.loaders進行配置（）
3.在命令行中配置（本文均由講述）
到這里，loader的使用已經開始入門了！