{"id":16925045,"url":"https://github.com/hiroppy/sweetpack","last_synced_at":"2025-04-11T11:31:40.651Z","repository":{"id":57376058,"uuid":"102268010","full_name":"hiroppy/sweetpack","owner":"hiroppy","description":"sweetpack helps eliminate time to suffer from webpack and babel😋","archived":false,"fork":false,"pushed_at":"2020-08-17T03:14:24.000Z","size":525,"stargazers_count":8,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T14:45:27.784Z","etag":null,"topics":["babel","css-loader","css-modules","html-webpack-plugin","loader","react","settings","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hiroppy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-03T13:53:13.000Z","updated_at":"2019-12-12T14:50:53.000Z","dependencies_parsed_at":"2022-09-02T19:32:07.232Z","dependency_job_id":null,"html_url":"https://github.com/hiroppy/sweetpack","commit_stats":null,"previous_names":["abouthiroppy/sweetpack"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiroppy%2Fsweetpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiroppy%2Fsweetpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiroppy%2Fsweetpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiroppy%2Fsweetpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hiroppy","download_url":"https://codeload.github.com/hiroppy/sweetpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248383975,"owners_count":21094646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","css-loader","css-modules","html-webpack-plugin","loader","react","settings","webpack"],"created_at":"2024-10-13T20:08:41.162Z","updated_at":"2025-04-11T11:31:39.836Z","avatar_url":"https://github.com/hiroppy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003esweetpack\u003c/h1\u003e\n\u003c/div\u003e\n\n[![NPM][npm-image]][npm-url]\n[![Travis][travis-image]][travis-url]\n[![Codecov][codecov-image]][codecov-url]\n[![David][david-image]][david-url]\n[![Dependencyci][dependencyci-image]][dependencyci-url]\n\n[npm-image]: https://img.shields.io/npm/v/sweetpack.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/sweetpack\n[travis-image]: https://img.shields.io/travis/abouthiroppy/sweetpack.svg?style=flat-square\n[travis-url]: https://travis-ci.org/abouthiroppy/sweetpack\n[codecov-image]: https://img.shields.io/codecov/c/github/abouthiroppy/sweetpack/master.svg?style=flat-square\n[codecov-url]: https://codecov.io/gh/abouthiroppy/sweetpack\n[david-image]: https://img.shields.io/david/abouthiroppy/sweetpack.svg?style=flat-square\n[david-url]: https://david-dm.org/abouthiroppy/sweetpack\n[dependencyci-image]: https://img.shields.io/badge/Dependency%20CI-passing-brightgreen.svg?style=flat-square\n[dependencyci-url]: https://dependencyci.com/github/abouthiroppy/sweetpack\n\n## Table of Contents\n- [What's sweetpack?](#whats-sweetpack)\n- [Samples](#samples)\n- [Usage](#usage)\n- [Command](#command)\n- [Setting File](#setting-file)\n- [Packages Included](#packages-included)\n- [Trouble Shooting](#trouble-shooting)\n\n## What's sweetpack?\nsweetpack helps you build your environment of webpack and babel.   \nIf you are building a simple application, let's enjoy using sweetpack!   \nsweetpack hides all common settings of webpack and babel, you are not taking the time to write the configuration.\n\n## Samples\n- [mini](./samples/mini)\n- [extract](./samples/extract)\n- [3 input files -\u003e 1 output file](./samples/multi-0)\n- [3 input files -\u003e 3 output files](./samples/multi-1)\n- [flow](./samples/flow)\n- [react + react-hot-loader + css-modules](./samples/react)\n- [react + react-hot-loader + css-modules + postcss-loader + file-loader](./samples/react-1)\n- [enable all options](./samples/all)\n\n## Usage\n### Install\n```\n$ npm install sweetpack --save-dev\n```\n\n```\n$ npx sweetpack \u003ccommand\u003e\n```\n\nRecommend to write to `package.json` as a task.\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"sweetpack watch\",\n    \"build\": \"NODE_ENV=production sweetpack build\"\n  }\n}\n```\n\n## Command\nsweetpack has `init`, `watch`, `build` commands.\n\n### sweetpack init\nCreate `.sweetpack.yml` as an init file.  \nThe file with default settings is generated.\n\n```yaml\nentry: src/index.js\noutput: dist\njs:\n  flow: false\n  react: false\ncss:\n  modules: false\n  postcss: false\nhtml:\n  filename: null\n  template: null\ndev:\n  env: null\n  port: 8080\n  analyzer: false\n  dashboard: true\nprod:\n  env: null\n  url: false\n  extract: false\n```\n\n### sweetpack watch\nStart with webpack-dev-server.  \nHot Module Replacement enabled.  \n\n[Activated Plugins](#watch)\n\n### sweetpack build\nUse babel-minify-webpack-plugin, OccurrenceOrderPlugin and AggressiveMergingPlugin.   \nAsset files is converted to name with hash.  \nDefault output directory is `/dist`.\n\n[Activated Plugins](#build)\n\n## Setting File\nFile name is `.sweetpack.yml`.  \nPlease set at the root of the project.\n\n```yaml\nentry: ./src/index.js\noutput: ./dist\njs:\n  flow: false\n  react: false\ncss:\n  modules: false\n  postcss: false\nhtml:\n  filename: null\n  template: null\ndev:\n  env: null\n  port: 8080\n  analyzer: false\n  dashboard: true\nprod:\n  env: null\n  url: false\n  extract: false\n```\n\nIf the configuration file can not be found, the above default setting is reflected.\n\n### entry\n| Type | Default |\n| :--- | :--- |\n| string \u0026#124; Object \u0026#124; Array\u0026lt;string\u0026gt; | `./src/index.js` |\n\nIt can be set just like webpack. see [Entry Points](https://webpack.js.org/concepts/entry-points/)  \n\n```yaml\nentry: ./src/index.js # string\n\nentry: # Object\n  a: ./src/a.js\n  b: ./src/b.js\n  c: ./src/c.js\n\nentry: # Array\n  - ./src/a.js\n  - ./src/b.js\n```\n\n\n### output\n| Type | Default |\n| :--- | :--- |\n| string | `./dist` |\n\n`output` has the same meaning as `webpack.output.path`.   \nIf specify a file name, sweetpack automatically decomposes it into `path` and `filename`.   \nWhen `entry` is Object, the file name automatically becomes `[name].js`.  \nIn the production environment, the file name is given `[hash]`.\n\n```yaml\n# if `entry` is Object\n# Automatically convert to `[name].js`\noutput: dist # -\u003e output.filename is `[name].js`\n\n# else(e.g. string, Array\u003cstring\u003e)\noutput: dist # -\u003e output.filename is `main.js`\noutput: dist/bundle.js # -\u003e output.filename is `bundle.js`\n\n```\n\n### js\n#### flow\n| Type | Default |\n| :--- | :--- |\n| boolean | false |\n\nIf select `true`, babel-preset-flow and flow-status-webpack-plugin will be valid.   \nPlease install `flow-bin`.\n```\n$ npm i flow-bin --save-dev\n```\n\n#### react\n| Type | Default |\n| :--- | :--- |\n| boolean | false |\n\nIf select `true`, babel-preset-react, react-hot-loader and babel-preset-react-optimize will be valid.  \nPlease install `react`, `react-dom`, `react-hot-loader@next`.\n```\n$ npm i react react-dom react-hot-loader@next\n```\n\n### css\n#### modules\n| Type | Default |\n| :--- | :--- |\n| boolean | false |\n\nIf select `true`, will add module option to css-loader.\n\nOutput class name will be changed by the environment.  \nWhen `process.env.NODE_ENV` is production, a class name is  `[hash:base64:5]`.  \nIn other cases, a class name is `[path]__[name]__[local]__[hash:base64:5]` for make debugging easier.\n\n### postcss\n| Type | Default |\n| :--- | :--- |\n| boolean | false |\n\nIf select `true`, will add postcss-loader to `module.rules`.  \nPlease add `postcss.config.js` to your project.\n```\n$ touch postcss.config.js\n```\nsee [samples/all](https://github.com/abouthiroppy/sweetpack/tree/master/samples/all)\n\n### html\nsweetpkack uses [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).\n\n#### filename\n| Type | Default |\n| :--- | :--- |\n| string | null |\n\nThe file to write the HTML to.\n\n#### template\n| Type | Default |\n| :--- | :--- |\n| string | null |\n\nSpecify the path of template for the generated HTML.  \n\nsee [the template option](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md)\n\n### dev\n#### env\nSpecify `.env`'s path.  \nIf not specified, will look for `.env`.  \n\n### port\n| Type | Default |\n| :--- | :--- |\n| number | 8080 |\n\nSpecify the port of webpack-dev-server.\n\n### analyzer\n| Type | Default |\n| :--- | :--- |\n| boolean | false |\n\nIf select `true`, will use webpack-bundle-analyzer at dev.\n\n### dashboard\n| Type | Default |\n| :--- | :--- |\n| boolean | true |\n\nIf select `false`, will remove webpack-dashboard at dev.\n\n### prod\n#### env\nSpecify `.env`'s path.\nIf not specified, will look for `.env`.  \n\n#### url\nIf select `true`, will use url-loader when prod.\n\n#### extract\n| Type | Default |\n| :--- | :--- |\n| boolean | false |\n\nIf select `true`, will use extract-text-webpack-plugin when prod.  \nhtml, js, css, images, etc are output to `dist` in their respective files.\n\nAs you can see,   \n[samples/all#production-build](https://github.com/abouthiroppy/sweetpack/tree/master/samples/all#production-build)\n\n## Packages Included\n### webpack\n- [webpack-dev-server](https://github.com/webpack/webpack-dev-server)(only watch mode)\n\n#### Loaders\n- [file-loader](https://github.com/webpack-contrib/file-loader)\n- [image-webpack-loader](https://github.com/tcoopman/image-webpack-loader)\n- [url-loader](https://github.com/webpack-contrib/url-loader)(default: `false`)\n- [style-loader](https://github.com/webpack-contrib/style-loader)\n- [css-loader](https://github.com/webpack-contrib/css-loader)\n- [postcss-loader](https://github.com/postcss/postcss-loader)(default: `false`)\n- [react-hot-loader](https://github.com/gaearon/react-hot-loader)(default: `false`, becomes effective when `js.react` is `true`)\n\n#### Plugins\n- [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)\n- [dotenv-webpack](https://github.com/mrsteele/dotenv-webpack)\n- [case-sensitive-paths-webpack-plugin](https://github.com/Urthen/case-sensitive-paths-webpack-plugin)\n- [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard)(only watch mode, default: `true`)\n- [flow-status-webpack-plugin](https://github.com/diegodurli/flow-status-webpack-plugin)(default: `false`)\n- [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)(default: `false`)\n- [babel-minify-webpack-plugin](https://github.com/webpack-contrib/babel-minify-webpack-plugin)(only production mode)\n- [clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin)(only production mode)\n- [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin)(only production mode, default: `false`)\n- webpack.optimize.OccurrenceOrderPlugin(only production mode)\n- webpack.optimize.AggressiveMergingPlugin(only production mode)\n\n### babel\n- [babel-preset-env](https://github.com/babel/babel-preset-env)\n- [babel-preset-stage-1](https://github.com/babel/babel/tree/master/packages/babel-preset-stage-1)\n- [babel-preset-flow](https://github.com/babel/babel/tree/master/packages/babel-preset-flow)(default: `false`, becomes effective when `js.flow` is `true`)\n- [babel-preset-react](https://github.com/babel/babel/tree/master/packages/babel-preset-react)(default: `false`, becomes effective when `js.react` is `true`)\n- [babel-preset-react-optimize](https://github.com/thejameskyle/babel-react-optimize)(default: `false`, becomes effective when `js.react` is `true`)\n- [babel-polyfill](https://github.com/babel/babel/tree/master/packages/babel-polyfill)(default: `false`)\n\n### Activated Plugins\n#### Common\n- html-webpack-plugin\n  - option: `html.filename`, `html.template`\n- dotenv-webpack\n  - can specify each file of dev and prod, if not specified, will look for `.env`\n- case-sensitive-paths-webpack-plugin\n- flow-status-webpack-plugin(default: `false`)\n  - option: `js.flow`\n- file-loader\n  - corresponding extension: `png`, `jpg`, `gif`, `svg`, `woff2`\n- image-webpack-loader\n- style-loader\n- css-loader\n  - option: `css.modules`(for css modules)\n  - corresponding extension: `css`, `scss`\n- postcss-loader(default: `false`)\n  - option: `css.postcss`\n    - postcss.config.js is required if enabled\n- babel-preset-env\n- babel-preset-stage-1\n- babel-preset-flow(default: `false`)\n  - option: `js.flow`\n- babel-preset-react(default: `false`)\n  - option: `js.react`\n\n#### Watch\n- webpack-dev-server\n- webpack-dashboard(default: `true`)\n- react-hot-loader(default: `false`)\n  - option: `js.react`\n- webpack-bundle-analyzer(default: `false`)\n\n#### Build\n- url-loader(default: `false`)\n- clean-webpack-plugin\n- babel-minify-webpack-plugin\n- babel-preset-react-optimize(default: `false`)\n  - option: `js.react`\n- extract-text-webpack-plugin(default: `false`)\n  - option: `prod.extract`\n- webpack.optimize.OccurrenceOrderPlugin\n- webpack.optimize.AggressiveMergingPlugin\n\n## Trouble Shooting\n### `Cannot read property 'profile' of null` happens when executed.\nIf `js.react` is `true`, check the version of react-hot-laoder.   \nsweetpack only supports versions above 3 so please install `react-hot-loader@next`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiroppy%2Fsweetpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiroppy%2Fsweetpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiroppy%2Fsweetpack/lists"}