Базовая конфигурация вебпака, которую вы должны знать в 2020 году

JavaScript Webpack
Базовая конфигурация вебпака, которую вы должны знать в 2020 году

предисловие

Давным-давно, когда наш фронтенд был просто обрезчиком страниц, мы разрабатывали html-страницу и обычно сталкивались с такими ситуациями:

  • Необходимо импортировать более десятка файлов css и js, а поскольку они имеют зависимости друг от друга, порядок введения не может быть хаотичным.
  • традиционныйhtml+css+jsМетод развития не может быть использован хорошоless/scssи т. д. препроцессоры css, а такжеES6+расширенный синтаксис.
  • Плохая возможность повторного использования кода и плохая ремонтопригодность.

На данный момент необходим инструмент для решения этих проблем, и появился веб-пакет.

webpack можно рассматривать как инструмент упаковки модулей: он объединяет различные статические ресурсы (такие как:javaScriptфайл изображения,cssфайлы и т. д.) в виде модулей, он может выполнять такие операции, как оптимизация синтаксического анализа и преобразование этих модулей, и, наконец, упаковывать их вместе, а упакованные файлы можно использовать в браузерах.

связанное предложение

Мой гитхаб:github.com/Michael-lzg

Преимущества веб-пакета:

  • Преобразование кода:typeScriptскомпилировано вjavaScript,scss，lessскомпилировано вcss.
  • Оптимизация файлов: сжатиеjavaScript,css,htmlкод для сжатия и объединения изображений.
  • Разделение кода: Извлеките общий код нескольких страниц, извлеките код, который не нужно выполнять на первом экране, и дайте ему возможность загружаться асинхронно.
  • Слияние модулей: в модульном проекте будет много модулей и файлов, и для классификации и объединения модулей в один файл требуется функция сборки.
  • Автоматическое обновление: отслеживайте изменения локального исходного кода, автоматически перестраивайте и обновляйте браузер.
  • Сильная расширяемость и совершенный механизм подключаемых модулей.

Процесс упаковки веб-пакета:

  1. Используйте babel для завершения преобразования кода и создания зависимостей для одного файла.
  2. Начать рекурсивный анализ с записи и сгенерировать граф зависимостей
  3. Упакуйте каждый упомянутый модуль в немедленно выполняемую функцию
  4. Запишите окончательный файл пакета в bundle.js

Четыре ядра Webpack:

  • запись: исходный файл записи js
  • вывод: сгенерированный файл
  • загрузчик: для обработки файлов
  • Плагины: Плагины, более мощные, чем загрузчик, могут использовать больше API веб-пакетов.

Entry

Какой модуль должен использовать webpack в качестве входного файла, чтобы начать построение своего внутреннего графа зависимостей. После входа в точку входа webpack узнает, какие модули и библиотеки зависят от точки входа (напрямую и косвенно), каждая зависимость затем обрабатывается и, наконец, выводится в файл с именем bundles.

Одиночная запись: запись представляет собой строку

module.exports = {
  entry: './src/index.js'
}

Несколько записей: запись является объектом

module.exports = {
  entry: {
    index: './src/index.js',
    manager: './src/manager.js'
  }
}

Output

Сообщите веб-пакету, куда выводить созданные им пакеты и как назвать эти файлы, которые можно указать в файле конфигурации веб-пакета.

Конфигурация с одним входом

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js’,
        path: __dirname + '/dist'
    }
};

Многовходовая конфигурация

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

Обеспечьте уникальные имена файлов с заполнителем [имя]

Loader

loaderПозволятьwebpackспособен справиться с темиjavaScriptдокумент(webpackтолько понятьjavaScript).loaderМожет конвертировать все типы файлов вwebpackДействительный модуль, который может обрабатывать, тогда вы можете воспользоватьсяwebpackвозможности упаковки для их обработки.

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

  • Ответственность загрузчика едина, и необходимо выполнить только одно преобразование.
  • Загрузчик на самом деле является модулем Node.js, которому необходимо экспортировать функцию.
  • Загрузчики всегда вызываются справа налево.

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

стиль обработки

  • css-loader: загрузить файл .css,
  • style-loader: используйте тег стиля, чтобыcss-loaderВнутренние стили, внедренные в нашу html-страницу
  • less-loader, sass-loader: Препроцессор парсинга css

обрабатывать js

  • Позволяет использовать последний код js (ES6, ES7...)
  • Позволяет использовать языки, которые были расширены на основе js, такие как JSX React;

обрабатывать файлы

При обработке ресурсов изображений мы обычно используем два загрузчика:file-loaderилиurl-loader, главное различие между ними.url-loaderВы можете установить ограничение размера изображения. Когда изображение превышает ограничение, его поведение эквивалентноfile-loader, а когда изображение не превышает предела, изображение будетbase64Упакован в css файлы в виде для уменьшения количества запросов

Обработка файлов .vue

vue-loaderдаwebpackмодуль загрузчика, который позволяет нам использовать.vueформат файла для записи однофайловых компонентов. Файл компонента, состоящий из одного файла, состоит из трех частей: шаблонов, сценариев и стилей.vue-loaderмодуль позволяетwebpackИспользуйте отдельный модуль загрузчика (например,sass 或 scss 加载器) для извлечения и обработки каждой части. Этот параметр позволяет нам использовать.vueфайл для беспрепятственной записи программ.

разработать загрузчик

Требование: рукописныйloader,Буду'kobe'Перевести в'Black Mamba'. Конечно, вы можете проектировать в соответствии с вашими потребностями. Это просто для объяснения метода.

1. Пишем загрузчик

В корневом каталоге создайте новый каталогkobe-loaderкак мы пишемloaderимя, выполнитьnpm init -yкоманду, создайте новый модульный проект, а затем создайте новыйindex.jsСоответствующий исходный код выглядит следующим образом:

module.exports = function(content) {
  return content && content.replace(/kobe/gi, 'Black Mamba')
}

2. Модуль регистрации

Обычно мы устанавливалиloaderОтnpmСкачайте и установите, но мы можемkobe-loaderИспользовать в каталогеnpm linkСвяжите исходный код разрабатываемого локального модуля с исходным кодом проекта, не выпуская модульnode_modulesкаталог, чтобы проект мог напрямую использовать локальныйnpmмодуль.

npm link

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

$ npm link kobe-loader

После успешной регистрации мы можемnode_modulesСоответствующий каталог можно найти вloader.

3. Настроить загрузчик в вебпаке

существуетwebpack.base.conf.jsДобавьте следующую конфигурацию

{
  test:/\.js/,
  loader: 'kobe-loader'
}

На данный момент пишем под всеми js файлами'kobe'заменить все на'Black Mamba'.

4. Параметры конфигурации

Вышеупомянутая копия является жестко запрограммированной заменой.Если я хочу изменить ее с помощью элементов конфигурации, я могу внести следующие коррективы в загрузчик

// custom-loader/index.js
var utils = require('loader-utils')
module.exports = function (content) {
  const options = utils.getOptions(this)
  return content && content.replace(/kobe/gi, options.name)
}

// webpack.base.conf.js
{
  test:/\.js/,
  use: {
    loader: 'kobe-loader',
    options: {
      name: 'kobe',
    }
  }
}

Plugin

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

Особенности плагина

  • это отдельный модуль
  • Модуль предоставляет функцию js внешнему миру.
  • прототип функции(prototype)определяет инъекцию наcompilerобъектapply методapplyФункция должна пройтиcompilerОбъект смонтированwebpackКрюк событий, Clooth Callback может получить текущую компиляциюcompilationОбъект, если это плагин асинхронной компиляции, вы можете получить обратный вызовcallback
  • Завершите процесс пользовательской субкомпиляции и обработайтеcomplitionвнутренние данные объекта
  • Если плагин скомпилирован асинхронно, он будет выполнен после завершения обработки данных.callbackПерезвоните.

Общие плагины

  • HotModuleReplacementPlugin代码热替换。 потому чтоHot-Module-ReplacementГорячее обновление зависит отwebpack-dev-server, последний - обновить файл пакета или перезагрузить, чтобы обновить всю страницу при изменении файла пакета,HRMзаключается в обновлении только измененной части.

  • HtmlWebpackPlugin, чтобы сгенерировать html-файл. в вебпакеentryНастроены связанные фрагменты записей иextract-text-webpack-pluginИзвлеченные стили css вставляются в предоставленный плагинtemplateилиtemplateContentСоздайте HTML-файл на основе содержимого, указанного в элементе конфигурации. Конкретный метод вставки заключается в вставке стиляlinkвставить вheadэлемент,scriptвставить вheadилиbodyсередина.

  • ExtractTextPlugin, будет генерировать файл css вместо встроенного. Основная цель этого плагина — извлечь стиль css и предотвратить нарушение загрузки стиля страницы, вызванное упаковкой стиля в js.

  • NoErrorsPluginСообщите об ошибке без выхода из процесса WebPack

  • UglifyJsPlugin, код некрасивый, и открывать его в процессе разработки не рекомендуется.uglifyJsPluginОн используется для сжатия файлов js, тем самым уменьшая размер файлов js и ускоряя скорость загрузки.uglifyJsPluginЭто замедлит скорость компиляции веб-пакета, поэтому рекомендуется просто отключить его во время разработки и снова включить во время развертывания. Несколько html совместно используют файл js (чанк), доступныйCommonsChunkPlugin

  • purifycss-webpack. При упаковке и компиляции неиспользуемый css в странице и js можно исключить, так что при использовании сторонней библиотеки классов загружаются только используемые классы, что сильно уменьшает размер css

  • optimize-css-assets-webpack-pluginСжатие css, оптимизация структуры css, облегчение загрузки и рендеринга веб-страниц.

  • webpack-parallel-uglify-pluginПлагин UglifyJS может работать параллельно, что может эффективно сократить время сборки.

разработать плагин

  • В процессе компиляции Webpack будет транслировать множество событий, таких как запуск, компиляция, выполнение, сбой и т.д., посмотреть можно на официальном сайте;
  • Механизм потока событий Webpack применяет режим наблюдателя, а подключаемые модули, которые мы пишем, могут прослушивать события Webpack для запуска соответствующей логики обработки;
  • Многие API, предоставляемые Webpack, можно использовать в плагинах, например, для чтения выходных ресурсов, блоков кода, модулей и зависимостей;

1. Напишите плагин

В корневом каталоге создайте новый каталог my-plugin в качестве имени нашего плагина, выполните команду npm init -y, создайте новый модульный проект, а затем создайте новый файл index.js Соответствующий исходный код выглядит следующим образом :

class MyPlugin {
  constructor(doneCallback, failCallback) {
    // 保存在创建插件实例时传入的回调函数
    this.doneCallback = doneCallback
    this.failCallback = failCallback
  }
  apply(compiler) {
    // 成功完成一次完整的编译和输出流程时，会触发 done 事件
    compiler.plugin('done', stats => {
      this.doneCallback(stats)
    })
    // 在编译和输出的流程中遇到异常时，会触发 failed 事件
    compiler.plugin('failed', err => {
      this.failCallback(err)
    })
  }
}
module.exports = MyPlugin

2. Модуль регистрации

В соответствии с описанным выше методом мы используем ссылку npm в каталоге my-plugin, чтобы связать исходный код разрабатываемого локального модуля с каталогом node_modules проекта без публикации модуля, чтобы проект мог напрямую использовать локальные модули npm. .

npm link

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

$ npm link my-plugin

После успешной регистрации мы можем найти соответствующий плагин в каталоге node_modules.

3. Настройте плагин

Добавьте следующую конфигурацию в webpack.base.conf.js.

plugins: [
  new MyPlugin(
    stats => {
      console.info('编译成功!')
    },
    err => {
      console.error('编译失败!')
    }
  )
]

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

рекомендуемая статья

Категории