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

1、功能不同

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

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

2、使用方式不同

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

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

3、作用范圍不同

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

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