webpack前端構建工具學習總結（二）之loader的使用

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的使用已經開始入門了！