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

引子

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

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

當然它如果能做的僅僅是這樣，那它也就不可能這麽火了=_=。所以它可以通過引入其他的loader，進而可以處理其它類型的文件。

loader介紹

Loader可以理解為是模塊和資源的轉換器，它本身是一個函數，接受源文件作為參數，返回轉換的結果。這樣，我們就可以通過require來加載任何類型的模塊或文件，比如VUE

先來看看 loader 有哪些特性？(網上復制的，不喜歡可以跳過。loaders-地址)

• 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 把它插入到頁面中。

在命令行中輸入：

1

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

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

1
2
3
4
5

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

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

安裝完畢。

加載 CSS 文件

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

1
2
3

body {
    background: red;
}

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

我們繼續編譯:

1

npx webpack entry.js --output-filename=./bundle.js --mode=development

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

擴展名自動綁定loader

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

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

1

npx webpack entry.js --output-filename=./bundle.js --mode=development --module-bind "css=!style-loader!css-loader"

。。

。。。

沒成功對吧!
因為!在命令行中具有特殊的含義，所以我們需要對它進行轉義操作。再來試試：

1

npx webpack entry.js --output-filename=./bundle.js --mode=development --module-bind "css=style-loader\!css-loader"

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

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

• 本文作者： guowenfh
• 本文鏈接： http://guowenfh.github.io/2016/03/24/vue-webpack-02-deploy/

webpack入坑之旅（二）loader入門