hiroppy / sweetpack

sweetpack helps eliminate time to suffer from webpack and babel😋

sweetpack

Table of Contents

• What's sweetpack?
• Samples
• Usage
• Command
• Setting File
• Packages Included
• Trouble Shooting

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.

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

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

sweetpack watch

Start with webpack-dev-server.
Hot Module Replacement enabled.

Activated Plugins

sweetpack build

Use babel-minify-webpack-plugin, OccurrenceOrderPlugin and AggressiveMergingPlugin.
Asset files is converted to name with hash.
Default output directory is /dist.

Activated Plugins

Setting File

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.

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.

see the template option

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
• image-webpack-loader
• url-loader(default: false)
• style-loader
• css-loader
• postcss-loader(default: false)
• react-hot-loader(default: false, becomes effective when js.react is true)

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 when js.flow is true)
• babel-preset-react(default: false, becomes effective when js.react is true)
• babel-preset-react-optimize(default: false, becomes effective when js.react is true)
• babel-polyfill(default: false)

Activated Plugins

Common

• html-webpack-plugin
  • option: html.filename, html.template
• dotenv-webpack
  • can specify each file of dev and prod, if not specified, will look for .env
• case-sensitive-paths-webpack-plugin
• flow-status-webpack-plugin(default: false)
  • option: js.flow
• file-loader
  • corresponding extension: png, jpg, gif, svg, woff2
• image-webpack-loader
• style-loader
• css-loader
  • option: css.modules(for css modules)
  • corresponding extension: css, scss
• postcss-loader(default: false)
  • option: css.postcss
    • postcss.config.js is required if enabled
• babel-preset-env
• babel-preset-stage-1
• babel-preset-flow(default: false)
  • option: js.flow
• babel-preset-react(default: false)
  • option: js.react

Watch

• webpack-dev-server
• webpack-dashboard(default: true)
• react-hot-loader(default: false)
  • option: js.react
• 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
• extract-text-webpack-plugin(default: false)
  • option: prod.extract
• 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.

sweetpack's Issues

set browser version

__wds is empty

    * configuration.entry['__wds'] should be a string.
    * configuration.entry['__wds'] should not be empty.
    * configuration.entry['__wds'] should be one of these:
      non-empty string | [non-empty string]
    * configuration.entry should be a string.
    * configuration.entry should be an array:
      [non-empty string]
    * configuration.entry should be an instance of function

e.g. multi-1
npm run build

options

dev:
  port: 8080
  contentBase: ''
  publicPath: ''
  dashboard: false
prod:
  extract: false

tmp for tests

inject webpack.config.js

make use of image-webpack-loader