{"id":19196949,"url":"https://github.com/jitesoft/simple-webpack","last_synced_at":"2026-04-14T06:03:56.383Z","repository":{"id":57121386,"uuid":"291287105","full_name":"jitesoft/simple-webpack","owner":"jitesoft","description":"Webpack configurations - pre-made and simple!","archived":false,"fork":false,"pushed_at":"2022-09-28T11:06:46.000Z","size":269,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-30T06:06:34.729Z","etag":null,"topics":["bootstrap","hacktoberfest","init-script","javascript","nodejs","simple","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jitesoft.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":"2020-08-29T14:29:39.000Z","updated_at":"2022-09-28T11:04:28.000Z","dependencies_parsed_at":"2022-08-24T06:51:03.303Z","dependency_job_id":null,"html_url":"https://github.com/jitesoft/simple-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jitesoft/simple-webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jitesoft%2Fsimple-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jitesoft%2Fsimple-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jitesoft%2Fsimple-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jitesoft%2Fsimple-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jitesoft","download_url":"https://codeload.github.com/jitesoft/simple-webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jitesoft%2Fsimple-webpack/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264507300,"owners_count":23619189,"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":["bootstrap","hacktoberfest","init-script","javascript","nodejs","simple","webpack"],"created_at":"2024-11-09T12:14:59.693Z","updated_at":"2026-04-14T06:03:56.318Z","avatar_url":"https://github.com/jitesoft.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simple webpack\n\n[![DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE](https://raw.githubusercontent.com/jitesoft/simple-webpack/master/wtfpl-badge-4.png)](http://www.wtfpl.net)\n\nWhy make it hard? It's quite simple!\n\n---\n\nThis repository contains a small init script which generates a simple webpack setup for web application development.  \nOther than the configuration, it updates your package.json file to include the required dependencies, devDependencies\nand scripts.\n\nThe directory structure it creates looks like this:\n\n```\nyour-package/\n├─ assets/\n│  ├─ fonts/\n│  │  ├─ .gitkeep\n│  ├─ images/\n│  │  ├─ .gitkeep\n│  ├─ static/\n│  │  ├─ index.html\n├─ dist/\n│  ├─ .gitkeep\n├─ src/\n│  ├─ style/\n│  │  ├─ index.scss\n│  ├─ js/\n│  │  ├─ index.js\n│  ├─ index.js\n├─ webpack.config.json\n├─ .simple\n```\n\nIf no package file is found, a default package file will be created.\n\nThe intention is that the script should allow you to keep all your files intact (exception with the webpack and package files).\nIf there are any issues with this, please let me know via github issues.\n\n**Usage**  \n\nInitialize your simple-webpack project!\n\n```\n// From NPM\nnpx @jitesoft/simple-webpack\n// Or from repo\nnpx github:@jitesoft/simple-webpack\n```\n\nStart building!\n\n````\nnpm i \u0026\u0026 npm run build      // depends on your node_env\nnpm i \u0026\u0026 npm run build:prod // prod either way!\nnpm i \u0026\u0026 npm run build:dev  // dev either way!\nnpm i \u0026\u0026 npm run watch      // watches your files and compiles them (dev only)\nnpm i \u0026\u0026 npm run serve      // Serve a http client on 0.0.0.0:9000 \n````\n\nBy default, an index.html file exists in the `assets/static` directory, it includes the js and css files by default\nand can be changed as wanted to fit your use case.\n\n## More details\n\nIf you wish to know what everything in the webpack file does, check the file itself, as it is quite\nwell commented!  \nBut, either way, feel free to read here if you can't figure out what webpack is doing even then!\n\n### Public Path\n\nWhen webpack compiles your assets, it will change all asset paths to fit the new location of the files.  \nThe default public path used is `/`, that is, it expects the content of `dist` to be placed in the root web directory.  \n\nTo change this, you can either use an environment variable (`SW_PUBLIC_PATH`) or change the `SW_PUBLIC_PATH` variable in the\n`webpack.config.js` file. Remember, the public path is the path _from_ the web-root.\n\n### Configuration\n\nThere are two ways to configure the behaviour. You can use the pre-created `.simple` configuration (json) to\nchange any of the variables inside it or you can use `ENV` variables.\n\n#### .simple\n\nThis is a simple config!  \nDefaults looks like the following:\n\n```\n{\n    \"publicPath\": \"\",\n    \"proxyUri\": null,\n    \"devServerPort\": 9000,\n    \"fonts\": { \"outputDir\": \"fonts/\" },\n    \"js\": { \"outputDir\": \"\" },\n    \"css\": { \"outputDir\": \"\" },\n    \"static\": { \"outputDir\": \"\" },\n    \"images\": {\n        \"outputDir\": \"images\",\n        \"plugins\": [\n            [\"mozjpeg\", { \"quality\": 70 }],\n            [ \"gifsicle\", {} ],\n            [ \"optipng\", {} ],\n            [ \"svgo\", {} ]\n        ]\n    }\n}\n```\n\nAll json and will be loaded at the start of the webpack config in case it exists.\n\n#### Environment variables\n\nEnvironment variables overrides the configuration file and are defined as `SW_CONFIG_SEPERATED_WITH_UNDERSCORE`, sub-objects\nare separated with __ (double underscore). arrays are not currently supported (making for example the `images.plugins` configuration \nnot possible to change via env variables yet).\n\nExamples:\n \n```dotenv\nSW_PUBLIC_PATH     \nSW_PROXY_URI       \nSW_IMAGES__OUTPUT_DIR \n```\n\n### Compression and such\n\n#### JS and Css\n\nAll the JavaScript files which are included through the `src/index.js` file will be ran by the babel loader and \nthen minified with terser, the base file will be placed in `dist/index.js` and all chunks (in case the application is large)\nwill be placed in the same directory but using chunk-hash as the name.\n\nSCSS files in the `src/styles` directory that are included in the `index.scss` file will be ran by the sass loader and\nafter being converted to standard css they will be extracted and minified.  \nThe output file will be `dist/index.css`. Any CSS included in the JavaScript code will as well be parsed and emitted to the dist dir.\n\n#### Static files\n\nAny files that you wish to have emitted into the dist directory should be placed in the `static` directory.  \nSubdirectories will be created, not flattened.\n\n#### Images\n\nThis configuration uses the imagemin-webpack plugin to compress images. The following image formats\nare compressed:\n\n    * jpe?g \n    * png\n    * gif \n    * tif \n    * svg\n\nOther images (or any files) in the `assets/images` directory will be copied to the `dist/images` directory, while these will\nbe compressed and then placed in the same directory.  \nThe filenames will be kept intact.\n\nWebp images will be left as is (and copied to the images dist dir), while all PNG and JPG\nimages will get two webp siblings in the directory (`[name].webp` and `[name].low.webp`).  \n\nThe `[name].low.webp` image is compressed with lowest quality and (if not good enough for you) a good choice to use\nas a pre-load image in case the other images are large, the `[name].webp` uses a higher quality which should be\nenough for most cases.\n\n##### Defaults?\n\nThe image compression plugins (which uses imagemin) are mostly using the default values, with exception to jpeg and \nwebp.  \nTo change the defaults for all (but webp), change the plugin configuration in the `imgminPlugins` array. Although, the defaults\nare decent for most cases.\n\nQuality for webp can be changed in the `ImageminWebpWebpackPlugin` config definition.\n\n#### Fonts\n\nFonts are not tampered with, but they are moved to the `dist/fonts` directory in case they are placed in the `assets/fonts` dir \nor included in JavaScript or in SCSS.\n\n### Serve\n\nYou can allow webpack to serve your content as a http server (uses nodejs express), the current settings allow you\nto access the assets on localhost port 9000. The `localhost` and `*.local` domains are set to be accepted,\nbut read the comments in the webpack file if you wish to enable more or turn off blocking over all.\n\nThe server is set to inject a hot module swap client inside the index.js file, so if enabled, it will allow for hot swapping.\n\nWhen using the dev server, the public path will have to be used.\n\nIncluding the assets is done by adding script tags pointing to the specific file you need:\n\n```text\n\u003cscript src=\"localhost:9000/index.js\"\u003e\u003c/script\u003e\n```\n\nYou can also enable the proxy of the webpack server to allow another page to be proxied through it.\nThis is done by setting the `SW_PROXY_URI` to the uri of the proxied page.  \nWhen doing this, you will have the pages on the same uri and any request not going to one of the\nwebpack assets will be proxied to the other service.\n\n---\n\nLicense: WTFPL\n\n```\n             DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE\n                     Version 2, December 2004\n \n  Copyright (C) 2020 Jitesoft\n \n  Everyone is permitted to copy and distribute verbatim or modified\n  copies of this license document, and changing it is allowed as long\n  as the name is changed.\n \n             DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE\n    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION\n \n   0. You just DO WHAT THE FUCK YOU WANT TO.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjitesoft%2Fsimple-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjitesoft%2Fsimple-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjitesoft%2Fsimple-webpack/lists"}