abouthiroppy/sweetpack
sweetpack помогает сократить время на мучения с webpack и babel😋github.com



$ npm i sweetpack --save-dev

Что такое сладкий пакет?

sweetpack помогает вам создать свою среду из webpack и babel.
sweetpack скрывает все общие настройки webpack и babel, вам не нужно тратить время на написание конфигурации.

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

Это стало стимулом для моего развития.

Цель

webpack может делать что угодно, поэтому я думаю, что его очень сложно абстрагировать.
Итак, цель состоит в том, чтобы помочь вам создать простое приложение сначала.
Кроме того, целью является веб .

Что умеет сладкий пак?

sweetpack поддерживает следующее.

  • использует параметр reactby (по умолчанию: false)
  • использует flow по опции (по умолчанию: false)
  • использует css-модули по опции (по умолчанию: false)
  • использует postcss-loader по опции (по умолчанию: false)
  • использует механизм шаблонов html (от html-webpack-plugin)
  • могу загрузить .env
  • webpack-dev-server активирован и включен HMR по умолчанию при разработке
  • использует react-hot-loader@next при разработке (по умолчанию: false)
  • прикрепляет хэш к имени файла при производстве
  • разбивает файлы по расширению при производстве (по умолчанию: false)
  • выполняет оптимизацию кода при производстве

.sweetpack.yml

sweetpach предоставляет файл конфигурации.

Настройки по умолчанию следующие.

entry: src/index.js
output: dist
js:
  flow: false
  react: false
css:
  modules: false
  postcss: false
html:
  filename: null
  template: null
dev:
  port: 8080
  dashboard: true
prod:
  extract: false

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

Этот файл можно создать с помощью init.

Плагины включены

Список используемых плагинов находится здесь.

Пример

Пример самой маленькой конфигурации.

package.json

{
  "scripts": {
    "start": "sweetpack watch",
    "build": "cross-env NODE_ENV=production sweetpack build"
  }
}

.sweetpack.yml

entry: ./lib/index.js
output: dist/bundle.js

Структура каталогов

dist
├── lib
│   └── index.js
└── package.json
1 directory, 2 files

Если вы запускаете npm start, вы можете разрабатывать, используя webpack-dev-server и webpack-dashboard во время разработки.

И вы запускаете npm run build , dist/ создается.

dist
├── bundle.2ea3ca43d449dd5fdc16.js
└── index.html
0 directories, 2 files

html и js создаются автоматически, а хеш добавляется к имени файла (также оптимизировано).

Конечно, css-loader и file-loader включены, поэтому вы можете использовать css, png, gif и т. д.

Создать среду разработки и производственную среду очень просто🤓

Пример включения всех настроек

https://github.com/abouthiroppy/sweetpack/tree/master/samples/all

отзыв очень-очень приветствуется :)

Если вам интересно, пожалуйста, используйте sweetpack🙏

https://github.com/abouthiroppy/sweetpack

Надеюсь, тебе понравится!!

Ваше здоровье.