之前面試，面試官問到一個(gè)問題，就是Webpack有l(wèi)oader了，為什么要還有弄一個(gè)plugins？插件不能也放在loader里面實(shí)現(xiàn)嗎？
回來查了下，現(xiàn)在總結(jié)一下

loader

查看原文

loader 用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換。loader 可以使你在 import 或"加載"模塊時(shí)預(yù)處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader 可以將文件從不同的語言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！【即把css轉(zhuǎn)譯成js能編譯的內(nèi)容】

• Webpack將一切文件視為模塊，但是webpack原生是只能解析js文件，如果想將其他文件打包的話，就會(huì)用到Loader，Loader的作用是讓webpack擁有加載和解析非js文件的能力。

插件(plugins)

查看原文

• Plugin可以拓展Webpack的功能，讓webpack具有更多的靈活性，在webpack運(yùn)行的生命周期中會(huì)廣播出許多監(jiān)聽事件，這些監(jiān)聽事件在合適的時(shí)機(jī)通過Webapck提供的API改變輸出結(jié)果。

插件是 webpack 的支柱功能。webpack 自身也是構(gòu)建于，你在 webpack 配置中用到的相同的插件系統(tǒng)之上！

插件目的在于解決 loader 無法實(shí)現(xiàn)的其他事。

剖析

webpack 插件是一個(gè)具有 apply 屬性的 JavaScript 對(duì)象。apply 屬性會(huì)被 webpack compiler 調(diào)用，并且 compiler 對(duì)象可在整個(gè)編譯生命周期訪問。

總結(jié)區(qū)別

1 .文檔定義loader為在模塊加載時(shí)的預(yù)處理文件【加載和解析非js文件】，故loader運(yùn)行在打包文件之前。
2 . plugins的定義為處理loader無法處理的事物，例如loader只能在打包之前運(yùn)行，但是plugins在整個(gè)編譯周期都起作用。