Советы по настройке Webpack

Краткий список инструкций с краткой информацией о достижении определенного поведения веб-пакета.

У Webpack большие возможности. Еще больший файл конфигурации. Такой большой, что кажется, будто он раздулся от собственного великолепия. Но с небольшим дополнительным прикосновением он может превратиться из пневматического молотка в превосходный суппорт.

Как получить переменные scss внутри кода js?

Установите ScssToJson

npm install scss-to-json --save-dev

Импорт scss-to-json

let scssToJson = require('scss-to-json');

Предоставить объект scss во внешних файлах

externals: {
  scss: JSON.stringify(scssToJson(scssVariablesPath))
}

Используйте его как модуль

import scss from 'scss';
console.log(scss['$color-black']); // #000

Однако есть один недостаток. Scss-to-json не может анализировать многострочные определения, включая карты/списки/массивы. Поэтому имейте в виду, что в файле _variables.scss должны быть переменные только с однострочными значениями.

Как сделать так, чтобы jQuery (или любой другой) был доступен для других библиотек?

Установить jQuery

npm install jquery --save

Используйте плагин ProvidePlugin для webpack.

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
]

Чтобы предоставить модули из локального файла проекта, см. примечание в следующем совете.

Как сделать импорт относительно корневых источников?

Использовать конфигурацию псевдонима

resolve: {
  alias: {
    sources: path.resolve('./src')
  }
}

Позже вы можете использовать следующий путь импорта

import component from 'soruces/js/component';

Обратите внимание, что в конфигурации веб-пакета также можно использовать псевдонимы. Например, в ProvidePlugin:

plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      Popper: 'sources/js/vendors/popper.js'
    })
]

Как использовать babel для транспиляции кода?

Установите необходимые загрузчики, пресеты и плагины

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime

Настройте загрузчик следующим образом

module: {
  rules: [
    {
      test: /.js$/,
      exclude: /(node_modules|bower_components|js\/vendors)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [[
            'env',
            {
                targets: {
                    browsers: ['last 2 versions', 'ie >= 10', 'safari >= 9']
                },
                useBuiltIns: true,
                debug: true
            }
          ]],
          plugins: [
              'syntax-dynamic-import',
              'transform-runtime'
          ],
          cacheDirectory: true
        }
      }
    }
  ]
}
  • Параметр test предоставляет регулярное выражение, которое фильтрует импорт по пути импорта.
  • Опция exclude фильтрует node_modules или bower_components, так как поставщики не обрабатываются (в npm модули ES5 по-прежнему являются стандартными).
  • загрузчик сообщает webpack, какой загрузчик будет использоваться.
  • параметры передаются загрузчику
  • Параметр окружения предустановок выбирает @babel/preset-env
  • Параметр «Предустановленные цели» запекает полифиллы для определенных версий браузера.
  • Параметр пресетов useBuiltIns заменяет импорт @babel/polyfill; с индивидуальными требованиями для @babel/polyfill в зависимости от среды
  • Синтаксис-динамический-импорт плагинов обеспечивает динамический синтаксис импорта с волшебными комментариями.
  • Плагины transform-runtime уменьшают раздувание полифилов (вот почему https://babeljs.io/docs/plugins/transform-runtime/)
  • Параметр cacheDirectory сообщает Babel о кэшировании сборок.

Использование отладки: true предоставляет полный список используемых преобразований и полифилов.