‚̧Nightingale Posing Mischievously
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org ¬Ľ

sweetpack

0.11.0¬†‚Äʬ†Public¬†‚Äʬ†Published

sweetpack

NPM Travis Codecov David Dependencyci

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

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

Loaders

Plugins

babel

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

install

npm i sweetpack

Downloadsweekly downloads

34

version

0.11.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar