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

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的使用已經開始入門了!
相關文章
相關標籤/搜索