Это продолжение части WebPack Часть-1, это часть-2 этой серии
Конфигурация — самая важная часть. 3 основная часть.
1. Требуется точка входа вашего проекта. По умолчанию точка входа ./src/index.js
2. Требуется вывод Точка вашего проекта. По умолчанию выходные данные создаются в формате ./dist/main.js
. Он будет иметь мини-файлы.
3. После 2 шагов файлы оптимизируются для производства.
Для этого вы можете создать файл webpack.config.js
в корневой папке.
Давайте начнем…
нам необходимо понять его Основные концепции:
Вход, Выход, Загрузчики, Плагины, Режим, Совместимость с браузером
Вход :
Запись определяет, откуда должен начинаться сборка веб-пакета.
По умолчанию его значение равно ./src/index.js
, но вы можете указать другие ( точки входа, установив в webpack.config.js
webpack.config.js
module.exports = { entry: './path/to/my/entry/file.js', };
Вывод :
Свойство Output указывает веб-пакету, где связывать файлы будет создаваться и как называть эти файлы. По умолчанию его значение равно ./dist/main.js
.
output: { path:____, filename:_____, } Thepath
property defines the path to the root of the project. Thefilename
property defines the name of the output file.
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', }, };
Погрузчики:
webpack понимает только файлы JavaScript и JSON. А загрузчики работают на уровне файлов во время или до >пакет создается.
webpack не понимает файлы .css, .scss или .ts. Тогда как мы будем связывать эти файлы?
Загрузчики позволяют веб-пакету обрабатывать другие типы файлов и преобразовывать их в допустимые модули, которые могут использоваться нашим приложением и добавляться в граф зависимостей.
Пример: позволяет связать файл CSS
css-loader — это модуль npm, который поможет веб-пакету собирать CSS из всех файлов css в вашем приложении и помещать его в строку.
style-loader возьмет выходную строку, сгенерированную вышеуказанным загрузчиком css, и поместит ее в теги ‹style› в файле index.html.
npm install css-loader style-loader — save-dev
- Свойство
test
определяет, какой файл или файлы следует преобразовать. - Свойство
use
указывает, какой загрузчик следует использовать для преобразования.
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', }, module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] }, };
В настоящее время единственное правило, которое у нас есть, содержит test:/\.css$/
и 'style-loader', 'css-loader' внутри массива
Что это значит? для любого файла, имя которого совпадает с регулярным выражением, указанным в свойстве test
. Сначала используйте 'css-loader' для их компиляции, а затем используйте 'style-loader' для выходных данных css-loader и добавьте их в webpack.config.
Плагины:
Плагины похожи на загрузчики. Плагины расширяют функциональные возможности по умолчанию, которые включает Webpack.
Загрузчики:
Загрузчики работают на уровне отдельных файлов во время или до создания комплекта.
Плагины.
Плагины работают на уровне пакета или фрагмента и обычно работают в конце пакета. процесс генерации.
Ссылки: Изображение[csso-webpack-plugin]
Есть множество доступных плагинов.
Пример: clean-webpack-plugin
clean-webpack-pluginПлагин webpack для удаления/очистки папки (папок) сборки. По умолчанию , этот плагин удалит все файлы внутри каталога output.path
веб-пакета, а также все неиспользуемые ресурсы веб-пакета после каждой успешной сборки.
webpack.config.js
const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { plugins: [ new CleanWebpackPlugin(['dist']), ] };
Режим:
устанавливает среду, в которой работает Webpack. Он может быть установлен на development
, production
или none
. Значение по умолчанию — production
.
module.exports = { mode: 'production', };