leomax-webpack

For developers

Сейчас - TypeScript

В данный момент происходит переписывание и улучшение идей модуля на TypeScript.

Прогресс

• <input checked="" disabled="" type="checkbox"> Webpack.ts (основной рабочий класс)
  • <input checked="" disabled="" type="checkbox"> Подключение пресетов
  • <input checked="" disabled="" type="checkbox"> Очередь пресетов
  • <input checked="" disabled="" type="checkbox"> Получение итоговой конфигурации
  • <input checked="" disabled="" type="checkbox"> Получение компилятора
  • <input checked="" disabled="" type="checkbox"> Хуки для работы с компилятором
• <input checked="" disabled="" type="checkbox"> Preset.ts (Базовый класс пресета)
  • <input checked="" disabled="" type="checkbox"> Конфигурируемость
  • <input checked="" disabled="" type="checkbox"> Заменяемость
  • <input checked="" disabled="" type="checkbox"> Приоритет в очереди
• <input checked="" disabled="" type="checkbox"> Пресеты
  • <input checked="" disabled="" type="checkbox"> babel
  • <input checked="" disabled="" type="checkbox"> env
  • <input checked="" disabled="" type="checkbox"> react
  • <input checked="" disabled="" type="checkbox"> async
  • <input checked="" disabled="" type="checkbox"> statics
  • <input checked="" disabled="" type="checkbox"> hot
  • <input checked="" disabled="" type="checkbox"> style

Основа

• Webpack 2 для сборки.
• webpack-dev-middleware в качестве прослойки для dev-сервера
• webpack-hot-middleware в качестве прослойки для горячей перезагрузки
• Webpack Dashboard для отображения состояния сборки. (Возможно)
• HappyPack для оптимизации и ускорения работы webpack
• webpack-merge для объединения конфигов
• Лоадеры
  • react-hot-loader для горячей перезагрузки react-компонентов
  • babel-loader для транспайлинга es-next кода
  • image-webpack-loader для сжатия изображений
• Плагины
  • friendly-errors-webpack-plugin для дружелюбного вывода состояния сборки в консоль
  • case-sensitive-paths-webpack-plugin для избегания ошибок в регистре файлов и дерикторий ( под вопросом )

Использование

import Webpack from 'leomax-webpack';

const webpack = new Webpack({
  env: 'development',
  context: __dirname,
  hot: {
    port: 9000
  }
});
// ...
webpack.run();

Пресеты

Конфигурация собирается из группы пресетов, обладающих следующими свойствами:

• Назначение. Каждый пресет делает что-то одно.
• Приоритет. Некоторые пресеты запускаются раньше в зависимости от приоритета. (по умолчанию 0)
• Конфигурация. Часть общей конфигурации, за которую отвечает пресет.
• Зависимости. Пресет может быть связан с другими (требовать, модифицировать, отключать и т.п.)
• Настраиваемость. Пресет может предоставлять опции для настройки или использовать опцию сборщика flags

Babel

Создает babel-loader`ы.

Зависимости

Расширяется/подменяется другими пресетами.

Конфигурация

{
  module: {
    rules: [ ... ]
  }
}

Target

Добавлят правила в зависимости от переменной окружения и платформы.

Конфиурация

{
  target,
  devtool,
  ?performance,
  ?externals,
  plugins: [
    DefinePlugin,
    ?NoErrorsPlugin,
    ?HotModuleReplacementPlugin,
    ?LoaderOptionsPlugin,
    ?ExtractTextPlugin,
    ?AssetsPlugin
  ]
}

Async

Пресет для оптимизации работы webpack`а. Использует HappyPack. Делает сборку мультипоточной, улучшает кеширование, запоминает предыдущую сборку.

Зависимости

Конфигурация данных пресетов будет перенесена в HappyPack:

• babel
• css
  • css/less
  • css/sass
• react

Конфигурация

{
  module: {
    rules: [
      ...{
        loader: 'happypack/loader?id=xxx',
        ...
      }
    ]
  },
  plugins: [
    ...HappyPack
  ]
}

CSS, CSS/(less, sass)

Добавляет конфигурацию для стилей и препроцессоров

Конфигурация

{
  module: {
    rules: [ ... ]
  }
}