Четыре основных концепции webpack
webpack - известный сборщик статических модулей. Сборщики модулей используются для объединения модулей Javascript в один файл, который затем может быть выполнен браузером. Они помогают управлять зависимостями в вашем коде и загружать ресурсы в соответствии с порядком зависимостей.
Есть четыре основных понятия в WebPack: entry, output, modules и plug-ins.
Эти конфигурации добавляются в webpack.config.js.
1. entry
entry и output связаны друг с другом.
module.exports = {
entry: './path/to/my/entry/file.js',
};
Приведенный выше фрагмент является примером конфигурации entry. По сути, вы сообщаете webpack самый первый файл, который ему нужно просмотреть, когда он начинает создавать граф зависимостей. Граф зависимостей начинается с этого файла, а затем строит его зависимости и зависимости своих зависимостей и так далее. webpack проходит через все эти зависимости и создает модули, а затем повторяет весь этот процесс во всем приложении.
2. output
Конфигурация output говорит WebPack, как и где он должен положить бандл и в каком формате. Например output, указав значение ниже, вы указываете webpack поместить пакеты в файл javascript с именем my-first-webpack.bundle.js, в папку dist в том же каталоге, где находится webpack.config.js.
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
};
3. rules и loaders
Конфигурации rules и loaders, говорит webpack как он должен обрабатывать различные типы файлов и конвертировать их в действительные модули, прежде чем они будут добавлены в графе зависимостей.
loaders обычно имеют два свойства, а именно:
test. Свойство test сообщает тип файла, который будет обрабатываться.use. Свойство use сообщает webpack, какой загрузчик будет использоваться при обработке файла.
Например, при построении из ранее написанной конфигурации свойство modules ниже сообщает webpack об этом:
«Привет, компилятор webpack, когда вы встретите путь, который заканчивается на .css внутри оператора require()/import, используйте css-loader, чтобы преобразовать его, прежде чем добавлять его в пакет».
const path = require('path');
const ExamplePlugin = require('ExamplePlugin.js')
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [
{
test: /\.css$/,
use: 'css-loader'
}
],
},
plugins: [
new ExamplePlugin()
]
};
4. plugins
Плагины позволяют выполнять любые функции. В то время как загрузчики используются для преобразования определенных типов модулей, плагины могут использоваться для выполнения более широкого круга задач, таких как оптимизация пакетов, управление активами, внедрение переменных среды, минимизация файлов и т.д. Например, приведенный ниже пример плагина распечатает сообщение "Hello I am learning" каждый раз, когда вы запускаете webpack. Webpack уже имеет богатую коллекцию плагинов, поэтому разработчики также могут проверить их, прежде чем изобретать велосипед.
class ExamplePlugin {
apply(compiler) {
compiler.plugin("run", (compiler, callback) {
console.log("Hello I am learning");
callback();
});
}
}
Я все еще нахожусь в процессе изучения webpack, но считаю, что простое понимание этих концепций поможет уверенно создавать конфигурации webpack, соответствующие потребностям разработчика.
