Джефф Льюис (последнее обновление: 28.10.2018)

Что такое Webpack?

Webpack - это один файл конфигурации (webpack.config.js), который мы создаем и настраиваем в соответствии с тем, как был создан ваш проект.

Webpack - это сборщик модулей, что означает, что он объединяет ваши файлы React (index.jsx, App.jsx и файлы компонентов), index.html и файлы CSS (модули с зависимостями) в статические ресурсы. Эти статические ресурсы, скорее всего, содержат код (JSX, ES6, ES7, ES8 и т. Д.), Который браузеры не могут прочитать. Вот где появляется Вавилон.

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

Люди получают доступ к вашему веб-приложению через браузер, но не все браузеры одинаковы. У людей есть выбор использовать такие браузеры, как Safari, Google Chrome, Firefox, Opera или Microsoft Edge. Легенда гласит, что некоторые пещерные люди до сих пор используют различные версии Internet Explorer. Я не собираюсь показывать пальцем, но * кашляет * корпоративная Америка * кашляет *. Эти различные браузеры не принадлежат к одной и той же версии или даже к одному и тому же выпуску. Вот тут-то и появляется Вавилон.

Что такое Вавилон?

Babel - это также один файл конфигурации (.babelrc), который мы создаем и настраиваем в соответствии с тем, как создавался ваш проект. Способ связи с подавляющим большинством браузеров (для тех, кто все еще использует Netscape Navigator, GoFundMe был настроен после этой трагедии) - через Webpack. Webpack принимает все файлы вашего проекта, создает статические ресурсы, а затем Babel переносит эти файлы для чтения в подавляющем большинстве браузеров. Это означает, что ваши файлы ES6, ES7, ES8 и React преобразуются в код ES5 (то, что может читать подавляющее большинство браузеров).

Как мы используем Webpack?

В этом руководстве мы будем использовать Webpack 4 и Babel с интерфейсом React. Это руководство только для Webpack и Babel, поэтому мы не будем углубляться в React.

1. Настройка Webpack + Babel

А. Инициализировать репозиторий:

Если вы еще этого не сделали, инициализируйте свой проект через терминал с помощью NPM. Это создаст package.json, в который будут добавлены наши зависимости разработчика. Если вы уже это сделали, можете пропустить эту часть A.

npm init

Б. NPM Зависимости разработчиков: Настройка:

Вот все необходимые и последние версии зависимостей Webpack и Babel, чтобы все работало по состоянию на середину 2018 года. Чтобы узнать, почему и что делает каждая зависимость, ознакомьтесь с частью C.

Примечание. Мы будем использовать Babel 7, поэтому в качестве префикса для зависимостей babel используется символ @. @babel/ различает эти зависимости как Пакеты с заданной областью, что означает, что префиксом пакета является учетная запись. Раньше любой мог просто назвать пакет babel-hacker-package, и кто-то подумал бы, что Бабель создал этот пакет. В Babel 7 Scoped Package существует единое соглашение об именах, и больше не будет проблем со случайным или преднамеренным кражей имен.

Примечание. Если вы используете Node.js версии 5 или выше, вам не нужно включать - сохраните, поскольку теперь он автоматически сохраняется в ваших зависимостях. Чтобы узнать, какую версию Node.js вы используете, введите в терминале node -v.

Webpack:

npm install webpack webpack-cli webpack-dev-server --save-dev

Babel:

npm install @babel/cli @babel/core @babel/node @babel/preset-env @babel/preset-react @babel/register --save-dev

Загрузчики JS / JSX и CSS:

npm install babel-loader style-loader css-loader

C. Объяснение каждой зависимости Dev:

Я провел небольшое исследование доступных зависимостей для Webpack и Babel. Ниже приводится краткое объяснение того, что они делают.

Webpack:

  • webpack (компилятор / сборщик Webpack) (Ссылка NPM)
  • webpack-cli (интерфейс командной строки, который обменивается данными с компилятором / сборщиком Webpack) (Ссылка NPM)
  • webpack-dev-server (только для разработки. Создает сервер разработки) (NPM Link)

Babel:

  • @ babel / core (Babel Transpiler) (Ссылка NPM)
  • @ babel / cli (интерфейс командной строки, который связывается с Babel Transpiler) (NPM Link)
  • @ babel / register (Транспилирует файлы, требуемые Node.js, с расширениями .es6, .es, .jsx и .js) (Ссылка NPM)
  • @ babel / preset-env (файлы переносятся с использованием ES6, ES7 и ES8. То же, что и babel-preset-latest, который включает babel-preset-es2015, babel-preset-es2016 и babel- preset-es2017. Однако babel-preset-latest устарел и заменен babel-preset-env, поэтому мы используем babel-preset-env. Это пакет всех пакетов) (NPM Link)
  • @ babel / preset-react (Транспилирует файлы с помощью React. Это необходимо, если ваш проект использует React) (NPM Link)

Погрузчики:

  • babel-loader (загружает файлы в Webpack для того, чтобы Babel транспилировал) (NPM Link)
  • style-loader (Добавить экспорт модуля как стиль в DOM. Необходимо при использовании css-loader, sass-loader или less-loader) (Ссылка NPM)
  • css-loader (загружает файл CSS с разрешенным импортом и возвращает код CSS) (Ссылка NPM)

2. Настройка Babel (.babelrc)

В корне папки вашего проекта создайте файл .babelrc.

A. Создайте базовую файловую структуру Babel:

{
  "presets": []
}

Б. Добавить предустановки Babel:

Теперь добавим те зависимости, которые были установлены ранее:

  • @ babel / preset-env (файлы ES6, ES7 и ES8)
  • @ babel / preset-react (файлы React)
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Файл Babel настроен и завершен. Теперь перейдем к файлу конфигурации Webpack.

3. Настройка Webpack (webpack.config.js)

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

A. Что делает каждая зависимость Dev:

  • путь (включен в Node.js. Создает динамический путь ввода / вывода из корневого каталога) (Документация)
  • html-webpack-plugin (автоматически создает html-файл из вашего шаблона index.html для обслуживания вашего приложения) (NPM Link)
  • babel-register (позволяет использовать ES6 + с файлами Node.js) (NPM Link)

Б. Базовая файловая структура Webpack:

Примечание. Мы будем добавлять в эту файловую структуру от B до F, поэтому, если вы хотите получить готовый файл Webpack, прокрутите вниз до «F. Опции + Инструменты разработки Webpack ».

// Imports: Dependencies
const path = require('path');
require("babel-register");
// Webpack Configuration
const config = {
  
  // Entry
  entry: {'PATH TO YOUR INDEX.JSX FILE'},
  // Output
  output: {
    path: path.resolve(__dirname, 'PATH TO SEND BUNDLED/TRANSPILED CODE'),
    filename: 'bundle.js',
  },
  // Loaders
  module: {
    rules : [
      // JavaScript/JSX Files
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // CSS Files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
    ]
  },
  // Plugins
  plugins: [],
};
// Exports
module.exports = config;

С. Запись:

Entry - это первый файл, с которого должен запускаться Webpack. Для приложений React мы хотим начать с файла index.js. С моей файловой структурой точка входа будет выглядеть так:

entry: {'./client/src/index.jsx'}

Д. Вывод:

Выходные данные - это то, куда будут отправлены файлы, переданные Babel и скомпилированные из Webpack, поэтому мы выведем наш файл как bundle.js в папку «dist» или дистрибутив.

path: path.resolve(__dirname, './client/dist'),
  filename: 'bundle.js'

E. Погрузчики:

Загрузчики - это то, как ваши статические ресурсы загружаются в Webpack. Если вы используете файлы .js вместо файлов .jsx, вы можете исправить конфигурацию, заменив /\.jsx$/ на /\.js$/ в «test», как показано ниже.

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: ['babel-loader']
}

Если вы используете файлы .sass вместо файлов .css, вы можете исправить конфигурацию, заменив /\.css$/ на /\.sass$/ в поле «test», как показано ниже. Вам нужно будет установить дополнительные зависимости разработчика, в зависимости от типов ваших файлов.

{
  test: /\.sass$/,
  use: ['style-loader', 'sass-loader']
}

Ф. Плагины:

Плагин html-webpack-plugin создает для вас файл index.html, если его нет. Вот пример того, как теперь будет выглядеть файловая структура с файлом плагина (изменения выделены жирным шрифтом):

  • html-webpack-plugin (плагин автоматически создает HTML-файлы для обслуживания ваших пакетов) (NPM Link)
// Imports
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
require("babel-register");
// Webpack Configuration
const config = {
  // Entry
  entry: {'./client/src/index.js'},
  
  // Output
  output: {
    path: path.resolve(__dirname, './client/dist'),
    filename: 'bundle.js',
  },
  // Loaders
  module: {
    rules : [
      // JavaScript/JSX Files
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // CSS Files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
    ]
  },
  // Plugins
  plugins: [
    new htmlWebpackPlugin({
      template: './client/dist/index.html',
      filename: 'index.html',
      hash: true
    })
  ],
};
// Exports
module.exports = config;
  • шаблон: указывает путь, по которому вы хотите создать файл.
  • filename: Указывает, как должен называться файл, в котором index.html является стандартным.
  • hash: значение true или false, в котором хешируется исходный URL-адрес вашего приложения.

Ф. Опции + Инструменты разработки Webpack:

Ниже мы собираемся добавить watch Webpack Option и source-map Webpack Devtool в наш файл конфигурации Webpack.

  • смотреть (Webpack продолжит следить за изменениями в любом из разрешенных файлов)
  • source-map (была ли когда-либо отладка по времени, и строка в сообщении об ошибке не является строкой в ​​вашем коде? Source Map предоставит подробную отладку, добавив метаинформацию для консоли браузера)
// Imports
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
require("babel-register");
// Webpack Configuration
const config = {
  // Entry
  entry: {'./client/src/index.js'},
  
  // Output
  output: {
    path: path.resolve(__dirname, './client/dist'),
    filename: 'bundle.js'
  },
  // Loaders
  module: {
    rules : [
      // JavaScript/JSX Files
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      // CSS Files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  // Plugins
  plugins: [
    new HtmlWebpackPlugin({
      template: './client/dist/index.html',
      filename: 'index.html',
      hash: true
    })
  ]
  // OPTIONAL
  // Reload On File Change
  watch: true,
  // Development Tools (Map Errors To Source File)
  devtool 'source-map',
};
// Exports
module.exports = config;

Готово, вы, Webpack и Babel Prodigy.

Вот и все! Теперь вы знаете, как создавать. Теперь вы знаете, как создавать собственные файлы конфигурации Webpack 4 и Babel 7 для обслуживания вашего современного кода.

Никто не идеален. Если вы обнаружили какие-либо ошибки, хотите предложить улучшения или расширить тему, отправьте мне сообщение. Я обязательно добавлю какие-либо улучшения или исправлю любые проблемы.