一、webpack的loader和plugin的區(qū)別

1、功能不同

Loader：Webpack 中的 Loader 主要用于處理文件類型的轉(zhuǎn)換和處理，比如將 ES6/ES7 代碼轉(zhuǎn)換成 ES5 代碼，將 LESS/SASS/CSS 文件轉(zhuǎn)換成瀏覽器可識(shí)別的 CSS 文件等。

Plugin：Webpack 中的 Plugin 主要用于在打包過(guò)程中做一些額外的處理工作，比如文件壓縮、代碼分離、資源優(yōu)化、生成 HTML 文件等。

2、使用方式不同

Loader：Webpack 中的 Loader 需要在模塊的 rules 屬性中配置，同時(shí)還需要通過(guò) npm 安裝相應(yīng)的 Loader，如 babel-loader、css-loader 等。在配置 Loader 時(shí)，需要設(shè)置 Loader 的匹配規(guī)則和轉(zhuǎn)換規(guī)則，使得 Webpack 能夠正確地識(shí)別和處理需要轉(zhuǎn)換的文件類型。

Plugin：Webpack 中的 Plugin 需要在配置文件中單獨(dú)引入，并通過(guò) new 關(guān)鍵字實(shí)例化，如 new HtmlWebpackPlugin()、new UglifyJsPlugin() 等。在配置 Plugin 時(shí)，需要設(shè)置插件的參數(shù)和執(zhí)行順序，以便插件能夠按照開發(fā)者的需求進(jìn)行工作。

3、作用范圍不同

Loader：Webpack 中的 Loader 是針對(duì)于每個(gè)文件進(jìn)行處理的，每個(gè)文件都會(huì)經(jīng)過(guò) Loader 進(jìn)行轉(zhuǎn)換處理，因此 Loader 的作用范圍比較小。

Plugin：Webpack 中的 Plugin 是針對(duì)于整個(gè)項(xiàng)目進(jìn)行處理的，它們能夠修改 Webpack 打包的結(jié)果、優(yōu)化打包過(guò)程、生成文件等，因此 Plugin 的作用范圍比較大。