Внешняя разработка: руководство по настройке Webpack

2024-07-12

Внешняя разработка: руководство по настройке Webpack

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

Что такое вебпак?

Проще говоря, Webpack — это статический инструмент упаковки модулей для современных приложений JavaScript. Когда Webpack обрабатывает приложение, он внутри себя создает граф зависимостей, который отображает каждый модуль, необходимый проекту, и генерирует один или несколько пакетов.

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

Базовая конфигурация

Сначала давайте взглянем на базовую конфигурацию Webpack.Создаватьwebpack.config.js Файл, это наша база конфигурации:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
1
2
3
4
5
6
7
8
9

здесь,entry указывает точку входа приложения,output Сообщает Webpack, куда выводить создаваемые им пакеты и как называть эти файлы.

Загрузчик: позволяет Webpack понимать различные файлы.

Сам Webpack понимает только файлы JavaScript и JSON. Загрузчики позволяют Webpack обрабатывать файлы других типов и преобразовывать их в допустимые модули для использования приложениями.

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

вы видели? Мы говорим Webpack: «Эй, братан, используй style-loader и css-loader для обработки файлов .css и используй file-loader для обработки изображений». Это так просто!

Плагины: магия Webpack

Плагины — это основа Webpack. Их можно использовать для решения самых разных задач: от оптимизации упаковки и сжатия до переопределения переменных в среде.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '我的超酷网页',
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12

Здесь мы используем CleanWebpackPlugin для очистки /dist папку и HtmlWebpackPlugin для создания HTML-файла. Это как установить для Webpack двух правых помощников, один отвечает за уборку, а другой — за украшение комнаты.

Режим: разработка или производство?

Вебпак предоставляет mode Параметры конфигурации, которые сообщают Webpack использовать встроенные оптимизации для соответствующего режима:

module.exports = {
  mode: 'production', // 或者 'development'
  // ...
};
1
2
3
4

Если установлено значение «производство», Webpack автоматически включит несколько плагинов оптимизации, таких как сжатие кода JS. Режим «разработки» ориентирован на быструю сборку и отличный опыт разработки. Это все равно, что надеть две шляпы для Webpack: одну — рабочую, а другую — отпускную.

Сервер разработки: острые ощущения от горячих обновлений

Используйте webpack-dev-server для создания простого веб-сервера, который можно перезагружать в режиме реального времени:

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};
1
2
3
4
5
6
7

Если после этой конфигурации вы измените код, браузер автоматически обновится. Это все равно, что включить турбокомпрессор в процесс разработки!

Разделение кода: не кладите все яйца в одну корзину

Разделение кода — одна из самых привлекательных функций Webpack. Это позволяет вам разделить ваш код на различные пакеты, которые затем можно загружать по требованию или параллельно.

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
1
2
3
4
5
6
7
8

Эта конфигурация говорит Webpack: «Эй, помогите мне извлечь общий код и упаковать его отдельно». Это позволит избежать повторной загрузки модулей и уменьшить размер основного пакета. Это все равно, что снова собрать чемодан и положить часто используемые предметы туда, где они наиболее легко доступны.

Встряхивание дерева: стряхивание лишних ветвей и листьев.

Tree Shaking — это термин, обычно используемый для описания удаления неиспользуемого кода в контексте JavaScript.

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};
1
2
3
4
5
6

Эта конфигурация автоматически включит Tree Shaking в производственном режиме. Он проанализирует ваш код, чтобы выяснить, какой код не используется, а затем «обрежет» эти бесполезные коды, как садовник обрезает деревья.

Подведем итог

Хорошо, после всей этой возни вы должны иметь полное представление о настройке Webpack. От базовой конфигурации до расширенных функций мы рассмотрели основные функции Webpack. Помните, что Webpack подобен мощному швейцарскому армейскому ножу, и правильное его использование может значительно повысить эффективность разработки и производительность приложений.

Конечно, мир Webpack – это нечто большее. Вам предстоит изучить более продвинутые функции, такие как отложенная загрузка, предварительная загрузка, кэширование и т. д. Однако, освоив эти основы, вы уже можете с гордостью сказать: «Я еще и мастер настройки Webpack!»

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

Теперь возьмите клавиатуру и начните настройку Webpack! Помните, каждая ошибка — это ступенька на пути к тому, чтобы стать мастером. Давай, бей рабочих!

Мини-программа интервью с Haima

Он включает в себя новейший обмен опытом собеседований, анализ реальных вопросов на собеседовании, полный набор вопросов из более чем 2000, а также подробные объяснения технических руководств по предварительному и внутреннему собеседованию, независимо от того, проводите ли вы собеседование для набора в школу, социального набора или хотите; чтобы улучшить свои навыки программирования, вы можете отнестись к этому спокойно~

из брусчатки. Давай, бей рабочих!

Мини-программа интервью с Haima

[Изображения по внешней ссылке передаются...(img-LBHUGtbe-1720689041341)]

Обмен технологиями