Webpack 自己只能處理 JavaScript 模塊,若是要處理其餘類型的文件,就須要使用 loader 進行轉換。javascript
Loader 能夠理解爲是模塊和資源的轉換器,它自己是一個函數,接受源文件做爲參數,返回轉換的結果。這樣,咱們就能夠經過 require
來加載任何類型的模塊或文件,好比 CoffeeScript、 JSX、 LESS 或圖片。css
Loader 能夠在 require()
引用模塊的時候添加,也能夠在 webpack 全局配置中進行綁定,還能夠經過命令行的方式使用。html
下面的例子是這篇文章的續篇:webpack前端構建工具學習總結(一)之webpack安裝、建立項目前端
1.在hello.js中經過require引用style.css,執行webpack hello.js hello.bundle.js,報錯以下圖:java
報錯提示須要一個loader轉換器來處理css樣式linux
2.輸入命令:npm install css-loader style-loader --save-dev,來安裝css的loader轉換器和style的loader轉換器webpack
安裝完成後,輸入命令:webpack hello.js hello.bundle.js,進行編譯hello.jsgit
運行發現仍然發現報錯web
3.查看引入style.css的地方,webpack只能處理javascript模塊,處理css須要藉助於loader轉換器npm
在 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的使用已經開始入門了!