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.
Top comments (1)
Add Elm and Sass as options and ok sold! Looks awesome. Far better than a webpack config