sweetpack
Table of Contents
What's sweetpack?
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.
Samples
- mini
- extract
- 3 input files -> 1 output file
- 3 input files -> 3 output files
- flow
- react + react-hot-loader + css-modules
- react + react-hot-loader + css-modules + postcss-loader + file-loader
- enable all options
Usage
Install
$ npm install sweetpack --save-dev
$ npx sweetpack <command>
Recommend to write to package.json
as a task.
Command
sweetpack has init
, watch
, build
commands.
sweetpack init
Create .sweetpack.yml
as an init file.
The file with default settings is generated.
entry: src/index.jsoutput: distjs: flow: false react: falsecss: modules: false postcss: falsehtml: filename: null template: nulldev: env: null port: 8080 analyzer: false dashboard: trueprod: env: null url: false extract: false
sweetpack watch
Start with webpack-dev-server.
Hot Module Replacement enabled.
sweetpack build
Use babel-minify-webpack-plugin, OccurrenceOrderPlugin and AggressiveMergingPlugin.
Asset files is converted to name with hash.
Default output directory is /dist
.
Setting File
File name is .sweetpack.yml
.
Please set at the root of the project.
entry: ./src/index.jsoutput: ./distjs: flow: false react: falsecss: modules: false postcss: falsehtml: filename: null template: nulldev: env: null port: 8080 analyzer: false dashboard: trueprod: env: null url: false extract: false
If the configuration file can not be found, the above default setting is reflected.
entry
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
output
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`
js
flow
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
react
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
css
modules
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.
postcss
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
html
sweetpkack uses html-webpack-plugin.
filename
Type | Default |
---|---|
string | null |
The file to write the HTML to.
template
Type | Default |
---|---|
string | null |
Specify the path of template for the generated HTML.
dev
env
Specify .env
's path.
If not specified, will look for .env
.
port
Type | Default |
---|---|
number | 8080 |
Specify the port of webpack-dev-server.
analyzer
Type | Default |
---|---|
boolean | false |
If select true
, will use webpack-bundle-analyzer at dev.
dashboard
Type | Default |
---|---|
boolean | true |
If select false
, will remove webpack-dashboard at dev.
prod
env
Specify .env
's path.
If not specified, will look for .env
.
url
If select true
, will use url-loader when prod.
extract
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
Packages Included
webpack
- webpack-dev-server(only watch mode)
Loaders
- file-loader
- url-loader(default:
false
) - style-loader
- css-loader
- postcss-loader(default:
false
) - react-hot-loader(default:
false
, becomes effective whenjs.react
istrue
)
Plugins
- html-webpack-plugin
- dotenv-webpack
- case-sensitive-paths-webpack-plugin
- webpack-dashboard(only watch mode, default:
true
) - flow-status-webpack-plugin(default:
false
) - webpack-bundle-analyzer(default:
false
) - babel-minify-webpack-plugin(only production mode)
- clean-webpack-plugin(only production mode)
- extract-text-webpack-plugin(only production mode, default:
false
) - webpack.optimize.OccurrenceOrderPlugin(only production mode)
- webpack.optimize.AggressiveMergingPlugin(only production mode)
babel
- babel-preset-env
- babel-preset-stage-1
- babel-preset-flow(default:
false
, becomes effective whenjs.flow
istrue
) - babel-preset-react(default:
false
, becomes effective whenjs.react
istrue
) - babel-preset-react-optimize(default:
false
, becomes effective whenjs.react
istrue
) - babel-polyfill(default:
false
)
Activated Plugins
Common
- html-webpack-plugin
- option:
html.filename
,html.template
- option:
- dotenv-webpack
- can specify each file of dev and prod, if not specified, will look for
.env
- can specify each file of dev and prod, if not specified, will look for
- case-sensitive-paths-webpack-plugin
- flow-status-webpack-plugin(default:
false
)- option:
js.flow
- option:
- file-loader
- corresponding extension:
png
,jpg
,gif
,svg
,woff2
- corresponding extension:
- style-loader
- css-loader
- option:
css.modules
(for css modules) - corresponding extension:
css
,scss
- option:
- postcss-loader(default:
false
)- option:
css.postcss
- postcss.config.js is required if enabled
- option:
- babel-preset-env
- babel-preset-stage-1
- babel-preset-flow(default:
false
)- option:
js.flow
- option:
- babel-preset-react(default:
false
)- option:
js.react
- option:
Watch
- webpack-dev-server
- webpack-dashboard(default:
true
) - react-hot-loader(default:
false
)- option:
js.react
- option:
- webpack-bundle-analyzer(default:
false
)
Build
- url-loader(default:
false
) - clean-webpack-plugin
- babel-minify-webpack-plugin
- babel-preset-react-optimize(default:
false
)- option:
js.react
- option:
- extract-text-webpack-plugin(default:
false
)- option:
prod.extract
- option:
- webpack.optimize.OccurrenceOrderPlugin
- webpack.optimize.AggressiveMergingPlugin
Trouble Shooting
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
.