webpack入坑之旅（二）loader入門

轉自我的博客：原地址

這是一系列文章，此係列全部的練習都存在了個人github倉庫中：
vue-webpack，在本人有了新的理解與認識以後,會對文章有不定時的更正與更新。下面是目前完成的列表：

• webpack入坑之旅（一）不是開始的開始

• webpack入坑之旅（二）loader入門

• webpack入坑之旅（三）webpack.config入門

• webpack入坑之旅（四）揚帆起航

• webpack入坑之旅（五）加載vue單文件組件

引子

在上一篇博客中咱們已經成功的把簡單的事情變得複雜了，把咱們的只有幾行代碼的兩個文件first.js、entry.js使用webpack進行文件打包生成了bundle.js。

Webpack 能作的就是這樣，只能處理 JavaScript 模塊。

固然它若是能作的僅僅是這樣，那它也就不可能這麼火了=_=。因此它能夠經過引入其餘的loader，進而能夠處理其它類型的文件。

loader介紹

Loader能夠理解爲是模塊和資源的轉換器，它自己是一個函數，接受源文件做爲參數，返回轉換的結果。這樣，咱們就能夠經過require來加載任何類型的模塊或文件，好比VUE、JSX、SASS 或圖片。

先來看看 loader 有哪些特性？(網上覆制的，不喜歡能夠跳過。地址)

• Loader能夠經過管道方式鏈式調用，每一個loader能夠把資源轉換成任意格式並傳遞給下一個loader，可是最後一個loader必須返回JavaScript。

• Loader能夠同步或異步執行。

• Loader運行在node.js環境中，因此能夠作任何可能的事情。

• Loader能夠接受參數，以此來傳遞配置項給loader。

• Loader能夠經過文件擴展名（或正則表達式）綁定給不一樣類型的文件。

• Loader能夠經過npm發佈和安裝。

• 除了經過package.json的main指定，一般的模塊也能夠導出一個loader來使用。

• Loader能夠訪問配置。

• 插件可讓loader擁有更多特性。

• Loader能夠分發出附加的任意文件。

loader使用

安裝

根據上面說的loader的知識，就這樣編譯是確定不行的，因此咱們安裝用來讀取css文件的css-loader，再用 style-loader 把它插入到頁面中。

在命令行中輸入：

npm install css-loader style-loader --save-dev

在package.json中，主要是devDependencies這個字段有了改變：

"devDependencies": {
    "css-loader": "^0.23.1",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2"
}

固然你能夠用一個更加方便的方式進行安裝，能夠直接在package.json中，添加相應的依賴（如上面的代碼），以後的命令行中運行npm intall，它會自動幫咱們安裝相應的依賴。

安裝完畢。

加載 CSS 文件

仍是上一篇博客中的文件，來添加一個css文件。style.css,在裏面添加

body {
    background: red;
}

修改咱們的entry.js，原文件不變，添加require("!style!css!./style.css");,用來引入咱們的css文件。

咱們繼續編譯:

webpack entry.js bundle.js

完成後，刷新咱們的頁面，背景顏色是否是已經變成了紅色了呢？

擴展名自動綁定loader

這就是咱們的loader的使用方式了。若是每次 require CSS 文件的時候都要寫 loader 前綴!style!css!這樣的東西，顯然是一件很麻煩的事情。咱們須要它能夠根據模塊類型（擴展名）來自動綁定須要的 loader。

來看看更簡便的方式，將 entry.js 中的 require("!style!css!./style.css") 修改成 require("./style.css") ，能夠改變一個背景顏色讓你更明顯的查看到變化！而後執行：

webpack entry.js bundle.js --module-bind "css=style!css"

。。

。。。

沒成功對吧!
由於!在命令行中具備特殊的含義，因此咱們須要對它進行轉義操做。再來試試：

webpack ./entry.js bundle.js --module-bind "css=style\!css"

成功的話，應該能再次看到背景的變化。

雖然這樣能夠將多個css文件進行編譯打包，可是總感受非常繁瑣，我不想每次都運行那麼一長串的命令怎麼辦？繼續向下走吧。