webpack3 -- полный анализ загрузчика

Webpack
webpack3 -- полный анализ загрузчика

Первый показ веб-пакетаОфициальный сайт, что может вебпак? Ответ, данный официальным сайтом, в одном предложении, сделайте все просто!

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

концепция

Загрузчик, как следует из названия, загрузчик, английское объяснение выглядит следующим образом:
Загрузчики — это преобразования, которые применяются к исходному коду модуля. Они позволяют предварительно обрабатывать файлы по мере их импорта или «загрузки». Таким образом, загрузчики похожи на «задачи» в других инструментах сборки и предоставляют мощные способ обработки этапов сборки интерфейса. Загрузчики могут преобразовывать файлы с другого языка (например, TypeScript) в JavaScript или встроенные изображения в URL-адреса данных. Загрузчики даже позволяют вам делать такие вещи, как импорт файлов CSS непосредственно из ваших модулей JavaScript!
Китайский перевод:
Загрузчик используется для преобразования исходного кода модуля. Загрузчики позволяют предварительно обрабатывать файлы при импорте или «загрузке» модулей. Таким образом, загрузчики похожи на «задачи» в других инструментах сборки и предоставляют мощный способ обработки этапов сборки внешнего интерфейса. Загрузчики могут преобразовывать файлы с разных языков (например, TypeScript) в JavaScript или преобразовывать встроенные изображения в URL-адреса данных. Загрузчик даже позволяет импортировать файлы CSS прямо в модули JavaScript!
Из этого мы видим мощную роль загрузчика, проанализируем:

  1. Роль конверсии. Все файлы, используемые при разработке, конвертируются в файлы необходимого формата, такие как html+css+js+img, необходимые для загрузки веб-страницы.
  2. Объектом преобразования является исходный код. Загрузчик только конвертирует исходный код.Что касается других функций, плагины приходят, чтобы получить то, что он не может.

Подводя итог предложению: погрузчик, загрузочная машина, похож на машину для производства соевого молока, положите на нее сырье, и она начнет работать всерьез!

Три способа использования загрузчика

Существует три способа использования загрузчиков в вашем приложении:

  • Конфигурация (рекомендуется): укажите загрузчик в файле webpack.config.js.
    module.rules позволяет указать несколько загрузчиков в конфигурации вашего веб-пакета. Это краткий способ показать загрузчик и помогает поддерживать чистоту кода. Также дает вам глобальный обзор каждого загрузчика
    module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    }
  ]
}
  • Встроенный: явно укажите загрузчик в каждом операторе импорта.
    Загрузчики могут быть указаны в операторе импорта или любом эквиваленте «импорта». Используйте !, чтобы разделить загрузчики в ресурсах. Каждая отделенная часть разрешается относительно текущего каталога.
    import Styles from 'style-loader!css-loader?modules!./styles.css';
    При добавлении всех правил и использовании ! любой загрузчик в конфигурации может быть соответствующим образом переопределен.
  • CLI: укажите их в командах оболочки.
    Вы также можете использовать загрузчик через CLI:
    webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
    При этом используется jade-loader для файлов .jade и style-loader и css-loader для файлов .css.

Особенности загрузчика

  • Пропуск цепи поддержки
  • Может быть синхронным или асинхронным
  • Работает в Node.js и может делать все возможное
  • Получить параметры запроса. Используется для передачи конфигурации загрузчику
  • Также можно настроить с помощью объекта параметров
  • Помимо использования общего основного свойства package.json, вы также можете экспортировать обычные модули npm в качестве загрузчика, определив поле загрузчика в package.json.
  • Плагины могут добавить больше возможностей в загрузчик
  • загрузчик может генерировать дополнительные произвольные файлы
    с помощью загрузчика (загрузчика) функций предварительной обработки, возможность предоставить больше экосистемы JavaScript. Теперь пользователи могут более гибко вводить детализированную логику, такую ​​как сжатие, упаковка, языковой перевод и т. д.

Пожарный погрузчик

Загрузчики следуют стандартному разрешению модуля. В большинстве случаев загрузчик будет разрешаться из пути к модулю (обычно путь к модулю рассматривается как npm install, node_modules).

Модуль загрузчика необходимо экспортировать как функцию и написать на языке js, совместимом с Node.js. Обычно это управляется с помощью npm, но также возможно иметь собственные загрузчики в виде файлов в приложении. По соглашению загрузчики обычно называются xxx-loader (например, json-loader).

Часто используемые загрузчики

webpack может использовать загрузчики для предварительной обработки файлов. Это позволяет вам упаковывать любые статические ресурсы, кроме js. Вы можете легко написать свои собственные загрузчики, используя Node.js.

  • babel-loader
    This package allows transpiling JavaScript files using Babel and webpack.
    Загрузите код ES2015+ и транспилируйте его в ES5 с помощью Babel.
    Установить:
    npm install --save-dev babel-loader babel-core babel-preset-env webpack
    использовать:
    {
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}
  • style-loader
    Adds CSS to the DOM by injecting a <style> tag
    Добавьте экспорт модуля в DOM в виде стилей.
    Установить:
    npm install style-loader --save-dev
    Рекомендуется использовать с css-loader
    использовать:
    {
  test: /\.css$/,
  use:  [
  'style-loader',
  'css-loader'
]
}
  • css-loader
    После синтаксического анализа файла CSS используйте импорт для загрузки и возврата кода CSS.
    Установить:
    npm install css-loader --save-dev
    использовать:
    {
  test: /\.css$/,
  use: [ 'style-loader', 'css-loader' ]
}
  • less-loader
    Загружать и переводить меньше файлов
    Установить:
    npm install --save-dev less-loader less
    использовать:
    {
  test: /\.less$/,
  exclude: /node_modules/,
  use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}
  • url-loader
    Loads files as base64 encoded URL
    Обрабатывает файлы изображений, но может возвращать URL-адрес данных, если файл меньше ограничения
    Установить:
    npm install --save-dev url-loader
    использовать:
    {
  test: /\.(jpg|jpeg|png|gif)$/,
  loader: 'url-loader',
  options: {
      limit: 8192
  }
}
  • file-loader
    Instructs webpack to emit the required object as file and to return its public URL
    Обработать шрифт/svg и т. д., отправить файл в выходную папку и вернуть (относительный) URL-адрес
    Установить:
    npm install file-loader --save-dev
    использовать:
    {
  test: /\.(woff|woff2|svg|eot|ttf)$/,
  use: 'file-loader'
}
  • vue-loader
    Загрузка и транспиляция компонентов Vue
    Установить:
    npm install --save-dev vue-loader vue vue-template-compiler
    использовать:
    {
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
      loaders: {
          less: ExtractTextPlugin.extract({
              use: ['css-loader', 'less-loader'],
              fallback: 'vue-style-loader'
          })
      }
  }
}
  • postcss-loader
    Загрузка и транспиляция файлов CSS/SSS с помощью PostCSS
    Установить:
    npm i -D postcss-loader
    использовать:
    Настроено в webpack.config.js
    {
test: /\.sss$/,
use: [
  ...,
  { loader: 'postcss-loader', options: { parser: 'sugarss' } }
]
}
    На данный момент, пожалуйста, переместите о параметрах, используемых в погрузчикеОфициальный сайтВопрос решен, спасибо за проверку!
Категории