Модули Webpack

Модули Webpack

Хотя веб-пакет может объединять файлы JS, по умолчанию он не может переводить ESNext в JS. Для этого нам также необходимо установить модули.

Установим:

npm install @ babel / core @ babel / preset-env babel-loader —save-dev

При установке зависимостей мы можем перечислить несколько имен через пробел.

Итак, выше мы устанавливаем одновременно:

  • @babel / core
  • @babel / preset-env
  • вавилонский погрузчик

Загрузка модуля babel в веб-пакет

Теперь добавим в webpack.config.js следующее:

const path = require (‘путь’);
module.exports = {запись: [path.resolve (‘./ src / js / functions.js’), path.resolve (‘./ src / scss / style.scss’)], вывод: {путь: путь. resol (__ dirname, ‘dist’), filename: ‘functions.bundle.js’}, module: {rules: [{exclude: / node_modules /, test: /\.js$/, loader: ‘babel-loader’) , параметры: {пресеты: [‘@ babel / preset-env’], compact: true}}]}};

Для модулей мы устанавливаем правила, которые представляют собой массив с правилами, какой файл как обрабатывать.

Для исключения мы устанавливаем веб-пакет так, чтобы он игнорировал папку / node_modules /, потому что там много файлов, и это может замедлить выполнение.

Читать также:  Массивы в PHP (часть 2) пользовательские ключи

Для теста нам нужно описать имена файлов, которые загружает веб-пакет, с помощью регулярного выражения. В данном случае описанное нами выражение предназначено для файлов с расширением ".js"..

Загрузчики веб-пакетов — важная часть, позволяющая веб-пакету «читать» содержимое файлов. Чтобы он мог провести необходимое лечение.

В качестве опций мы сейчас устанавливаем babel для загрузки стандартных настроек из модуля @ babel / preset-env. Они зависят от среды (разработки или производства). Эта среда напрямую связана с командой dev, которую мы определили в packkage.json. Помните, что в настоящее время у нас был — mode = development.

Загрузка модуля SCSS в webpack

SCSS следующий.

Сначала установим:

npm install mini-css-extract-plugin css-loader sass-loader node-sass —save-dev

Как правило, самозагрузчик позволяет веб-пакету читать файлы CSS. Кроме того, нам нужны isass-loader и code-sass, чтобы он мог обрабатывать специфический синтаксис SASS и SCSS..

Читать также:  Webpack среда разработки и производства

Пока что в webpack можно будет включать наши стили. Он преобразует их в JS и добавит в functions.bundle.js.

Почему наш emini-css-extract-plugin

Этот плагин позволяет нашему CSS не переходить в JS, а оставаться в отдельных файлах CSS..

Но так у нас будет 1 файл, чтобы загрузить больше! Делаем бандл для уменьшения количества запросов к серверу?

1 или 2 запроса сами по себе не проблема.

Однако я предпочитаю, чтобы люди с отключенным JS на своем компьютере по-прежнему могли загружать CSS. Если он включен в functions.bundle.js, то наш сайт будет содержать чистый HTML без каких-либо стилей. Мне лично это не нравится.

Добавьте модуль SCSS в webpack.config.js

Отредактируем наш файл так, чтобы у нас было:

Читать также:  Начало работы с JavaScript часть 2

const path = require (‘путь’); const MiniCssExtractPlugin = require ("mini-css-extract-plugin");
module.exports = {запись: [path.resolve (‘./ src / js / functions.js’), path.resolve (‘./ src / scss / style.scss’)], вывод: {путь: путь. resolve (__ dirname, ‘dist’), имя файла: ‘functions.bundle.js’}, модуль: {rules: [{exclude: / node_modules /, test: /\.js$/, loader: ‘babel-loader’ , параметры: {presets: [‘@ babel / preset-env’], compact: true}}, {exclude: / node_modules /, test: /\.scss$/, используйте: [{loader: MiniCssExtractPlugin.loader}, {loader: ‘css-loader’}, {loader: ‘sass-loader’}]}]}, плагины: [новый MiniCssExtractPlugin ({filename: ‘style.bundle.css’})]};

В целом настройки аналогичны. Снова выключите node_modules и установите для теста load.scssfiles..

Однако на этот раз нам понадобится несколько загрузчиков. Вот почему мы passuse, то есть массив загрузчиков.

Наконец, однако, нам нужно создать экземпляр самого MiniCssExtractPluginplugin и указать имя файла, в котором мы будем сохранять информацию..

Теперь при запуске npm run dev мы будем генерировать / functions.bundle.jsidist / style.bundle.css..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?