sweetpack: helps eliminate time to suffer from webpack and babel😋

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

$ 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.

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.

Example

An example of the smallest configuration.

package.json

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

.sweetpack.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.

Comments

[Gage]

Add Elm and Sass as options and ok sold! Looks awesome. Far better than a webpack config