В чем разница между загрузчиком и плагином в Webpack?
Этот вопрос проверяет способность различать два основных механизма Webpack — загрузчики и плагины, которые выполняют разные роли в процессе сборки.
Короткий ответ
Загрузчики преобразуют файлы (например, TypeScript в JavaScript или SCSS в CSS), чтобы Webpack мог их обработать. Плагины, напротив, работают на более высоком уровне — они добавляют функциональность в процесс сборки, например, оптимизацию или создание новых файлов.
Длинный ответ
Основное различие между загрузчиками и плагинами в том, что они выполняют разные задачи:
Загрузчики:
Загрузчики занимаются преобразованием отдельных файлов. Они применяются на этапе обработки файлов, используя цепочки трансформации. Например, чтобы преобразовать SCSS в CSS:
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
}
Плагины:
Плагины добавляют функциональность на этапе сборки. Они выполняют сложные задачи, такие как минификация кода, автоматическое подключение скриптов или кэширование. Например, TerserPlugin минифицирует JavaScript:
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};Таким образом, загрузчики обрабатывают контент, а плагины изменяют сам процесс сборки. Оба инструмента работают совместно, чтобы создавать готовый продукт.