sweetpack helps eliminate time to suffer from webpack and babel😋
MIT License
sweetpack helps you build your environment of webpack and babel. If you are building a simple application, let's enjoy using sweetpack! sweetpack hides all common settings of webpack and babel, you are not taking the time to write the configuration.
$ npm install sweetpack --save-dev
$ npx sweetpack <command>
Recommend to write to package.json
as a task.
{
"scripts": {
"start": "sweetpack watch",
"build": "NODE_ENV=production sweetpack build"
}
}
sweetpack has init
, watch
, build
commands.
Create .sweetpack.yml
as an init file.
The file with default settings is generated.
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
Start with webpack-dev-server. Hot Module Replacement enabled.
Use babel-minify-webpack-plugin, OccurrenceOrderPlugin and AggressiveMergingPlugin.
Asset files is converted to name with hash.
Default output directory is /dist
.
File name is .sweetpack.yml
.
Please set at the root of the project.
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.
Type | Default |
---|---|
string | Object | Array<string> | ./src/index.js |
It can be set just like webpack. see Entry Points
entry: ./src/index.js # string
entry: # Object
a: ./src/a.js
b: ./src/b.js
c: ./src/c.js
entry: # Array
- ./src/a.js
- ./src/b.js
Type | Default |
---|---|
string | ./dist |
output
has the same meaning as webpack.output.path
.
If specify a file name, sweetpack automatically decomposes it into path
and filename
.
When entry
is Object, the file name automatically becomes [name].js
.
In the production environment, the file name is given [hash]
.
# if `entry` is Object
# Automatically convert to `[name].js`
output: dist # -> output.filename is `[name].js`
# else(e.g. string, Array<string>)
output: dist # -> output.filename is `main.js`
output: dist/bundle.js # -> output.filename is `bundle.js`
Type | Default |
---|---|
boolean | false |
If select true
, babel-preset-flow and flow-status-webpack-plugin will be valid.
Please install flow-bin
.
$ npm i flow-bin --save-dev
Type | Default |
---|---|
boolean | false |
If select true
, babel-preset-react, react-hot-loader and babel-preset-react-optimize will be valid.
Please install react
, react-dom
, react-hot-loader@next
.
$ npm i react react-dom react-hot-loader@next
Type | Default |
---|---|
boolean | false |
If select true
, will add module option to css-loader.
Output class name will be changed by the environment.
When process.env.NODE_ENV
is production, a class name is [hash:base64:5]
.
In other cases, a class name is [path]__[name]__[local]__[hash:base64:5]
for make debugging easier.
Type | Default |
---|---|
boolean | false |
If select true
, will add postcss-loader to module.rules
.
Please add postcss.config.js
to your project.
$ touch postcss.config.js
see samples/all
sweetpkack uses html-webpack-plugin.
Type | Default |
---|---|
string | null |
The file to write the HTML to.
Type | Default |
---|---|
string | null |
Specify the path of template for the generated HTML.
Specify .env
's path.
If not specified, will look for .env
.
Type | Default |
---|---|
number | 8080 |
Specify the port of webpack-dev-server.
Type | Default |
---|---|
boolean | false |
If select true
, will use webpack-bundle-analyzer at dev.
Type | Default |
---|---|
boolean | true |
If select false
, will remove webpack-dashboard at dev.
Specify .env
's path.
If not specified, will look for .env
.
If select true
, will use url-loader when prod.
Type | Default |
---|---|
boolean | false |
If select true
, will use extract-text-webpack-plugin when prod.
html, js, css, images, etc are output to dist
in their respective files.
As you can see, samples/all#production-build
false
)false
)false
, becomes effective when js.react
is true
)true
)false
)false
)false
)false
, becomes effective when js.flow
is true
)false
, becomes effective when js.react
is true
)false
, becomes effective when js.react
is true
)false
)html.filename
, html.template
.env
false
)
js.flow
png
, jpg
, gif
, svg
, woff2
css.modules
(for css modules)css
, scss
false
)
css.postcss
false
)
js.flow
false
)
js.react
true
)false
)
js.react
false
)false
)false
)
js.react
false
)
prod.extract
Cannot read property 'profile' of null
happens when executed.If js.react
is true
, check the version of react-hot-laoder.
sweetpack only supports versions above 3 so please install react-hot-loader@next
.