DEV Community 👩‍💻👨‍💻

Yuta Hiroto
Yuta Hiroto

Posted on

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

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

$ npm i sweetpack --save-dev
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

.sweetpack.yml

entry: ./lib/index.js
output: dist/bundle.js
Enter fullscreen mode Exit fullscreen mode

Directory Structure

├── dist
├── lib
│   └── index.js
└── package.json
2 directory, 2 files
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
justgage profile image
Gage

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

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.