在上篇部落格中我們通過webpack將first.js和entry.js兩個檔案打包成了bundle.js，除此之外還可以通過引入其他的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使用

拿讀取css檔案舉個栗子

安裝用來讀取css檔案的css-loader
再用 style-loader 把它插入到頁面中。

在命令列中輸入：npm install css-loader style-loader --save-dev

然後檢查下你的 package.json 檔案看看是否發生了一下的變化：

"devDependencies": {
    "css-loader": "^0.28.1",
    "style-loader": "^0.17.0",
    "webpack": "^2.5.1"
  }

接下來我們新建一個css檔案命名為style.css,內容為:

#app{
    color: red;
}

下面我們要對entry.js進行一些新增修改：

require("!style-loader!css-loader!./style.css");

然後進行編譯打包，命令號輸入：webpack entry.js bundle.js
完成之後重新整理我們的頁面發現h1的標題變成了紅色。

當然了，如果覺得每次require css檔案的時候都要寫loader和那麼多的字首！我們也可以採取以下這種方式：

require("./style.css")

在進行編譯打包時候，命令列輸入以下：webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"