sweetpack: helps eliminate time to suffer from webpack andÂ babelðŸ˜‹
Tags: javascript, library, webpack, react
Published: 2017-10-17 15:18:31

---
title: "sweetpack: helps eliminate time to suffer from webpack andÂ babelðŸ˜‹"
published: true
description: helps eliminate time to suffer from webpack andÂ babel
tags: javascript,library,webpack,react
---

repo: https://github.com/abouthiroppy/sweetpack

```sh
$ npm i sweetpack --save-dev
```

## What’s sweetpack?
sweetpack helps you build your environment of webpack and babel.
sweetpack hides all common settings of webpack and babel, you are not taking the time to write the configuration.

## Goal
webpack can do anything so I think it is very difficult to abstract.
So, the goal is to help you build a simple application at first.
Also, the target is the web.

## What can sweetpack do?
sweetpack supports the following.
- uses react by the option(default: false)
- uses flow by the option(default: false)
- uses css-modules by the option(default: false)
- uses postcss-loader by the option(default: false)
- uses a template engine of html(by html-webpack-plugin)
- can loadÂ .env
- webpack-dev-server is activated and enabled HMR by default at the development
- uses react-hot-loader@next at development(default: false)
- attaches hash to the filename when production
- splits files by extension when production(default: false)
- performs code optimization when production

## .sweetpack.yml
sweetpach provides the config file.
The default settings are as follows.

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

If the configuration file can not be found, the above default setting is reflected.
This file can be generated with `init`.

## Plugins Included
The list of used plugins is [here](https://github.com/abouthiroppy/sweetpack#activated-plugins).

## Example
An example of the smallest configuration.

_package.json_
```json
{
  "scripts": {
    "start": "sweetpack watch",
    "build": "cross-env NODE_ENV=production sweetpack build"
  }
}
```

_.sweetpack.yml_

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

_Directory Structure_

```
â”œâ”€â”€ dist
â”œâ”€â”€ lib
â”‚   â””â”€â”€ index.js
â””â”€â”€ package.json
2 directory, 2 files
```

If you run `npm start`, You can develop using webpack-dev-server and webpack-dashboard during development.

And you run `npm run build`, `dist/` is created.

```
dist
â”œâ”€â”€ bundle.2ea3ca43d449dd5fdc16.js
â””â”€â”€ index.html
0 directories, 2 files
```

The html and js are automatically created and the hash is added to the file name.(also optimized)

Of course, css-loader and file-loader are included, so you can use css, png, gif, etc.

**It is very easy to build development environment and production environmentðŸ¤“**

An example of turning on all settings

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

## feedback is very very welcomeÂ :)
If you are interested, please use sweetpackðŸ™

https://github.com/abouthiroppy/sweetpack

Hope you enjoy it!!
Cheers.