{"id":18007544,"url":"https://github.com/hoangvvo/webpack-config-react","last_synced_at":"2026-04-20T13:06:48.606Z","repository":{"id":66338822,"uuid":"411250841","full_name":"hoangvvo/webpack-config-react","owner":"hoangvvo","description":"A bare, modern Webpack 5 config to create a react app without create-react-app. Not battery included!","archived":false,"fork":false,"pushed_at":"2022-02-08T21:08:12.000Z","size":792,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-09T19:02:15.972Z","etag":null,"topics":["minimal","react","webpack","webpack5"],"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/hoangvvo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-28T11:18:30.000Z","updated_at":"2021-10-22T15:37:10.000Z","dependencies_parsed_at":"2023-03-15T20:30:25.184Z","dependency_job_id":null,"html_url":"https://github.com/hoangvvo/webpack-config-react","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/hoangvvo/webpack-config-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangvvo%2Fwebpack-config-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangvvo%2Fwebpack-config-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangvvo%2Fwebpack-config-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangvvo%2Fwebpack-config-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoangvvo","download_url":"https://codeload.github.com/hoangvvo/webpack-config-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangvvo%2Fwebpack-config-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32048472,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["minimal","react","webpack","webpack5"],"created_at":"2024-10-30T01:13:43.935Z","updated_at":"2026-04-20T13:06:48.564Z","avatar_url":"https://github.com/hoangvvo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-config-react\n\nA bare, modern Webpack 5 config to create a react app without [create-react-app](https://github.com/facebook/create-react-app). Not battery included!\n\n**Note:** This package is only for those who are experienced with web bundling, transpilation (eg. `@babel/preset-env`), optimization, since it comes with **no opinionated configuration** out of the box. If you are a beginner, it's better to stick with [create-react-app](https://github.com/facebook/create-react-app) or use [Next.js](https://nextjs.org/).\n\n## Features\n\n- Freedom to config CSS, images, svg, etc. (eg. Use the new [Asset Modules](https://webpack.js.org/guides/asset-modules/))\n- Support both [babel](https://babeljs.io/) and [swc](https://swc.rs/). Allow custom config files.\n- Public folder (`./public`)\n- [Examples](./examples) to incrementally add back features like [CSS, PostCSS, SASS, Modules](./examples/css-postcss-sass) or [TypeScript](./examples/typescript).\n\n## Installation\n\n```bash\nnpm i --save-dev webpack-config-react webpack webpack-cli webpack-dev-server\n```\n\n## Usage\n\n### package.json scripts\n\nAdd the following scripts to your `package.json`:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"webpack --mode=production\",\n    \"dev\": \"webpack serve\"\n  }\n}\n```\n\nTo serve the built app, you can use [sirv-cli](https://www.npmjs.com/package/sirv-cli):\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"sirv build\"\n  }\n}\n```\n\n[Create React App Deployment article](https://create-react-app.dev/docs/deployment) also helps since this config also outputs file to `build` (by defaults).\n\n### webpack.config.js\n\nCreate `webpack.config.js`:\n\n```js\nconst { createConfig } = require(\"webpack-config-react\");\n\nmodule.exports = async (env, argv) =\u003e {\n  const webpackConfig = await createConfig(\n    argv.mode === \"production\" || env.production\n  );\n  return webpackConfig;\n};\n```\n\nTo extend `webpack-config-react`, we can use [webpack-merge](https://github.com/survivejs/webpack-merge) to merge additional configs into the return value of `await createConfig()`.\n\n```bash\nnpm i --save-dev webpack-merge\n```\n\nSee [examples](examples) for some usages.\n\nUp next, depending on your preferences and requirements, we can either use [babel](https://babeljs.io/) or [swc](https://swc.rs/).\n\n### With babel\n\n[Example](./examples/simple)\n\nInstall dependencies:\n\n```bash\nnpm i --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader\n```\n\nCreate `babel.config.json` (or [other formats](https://babeljs.io/docs/en/config-files#configuration-file-types))\n\n```json\n{\n  \"presets\": [\n    [\"@babel/preset-env\"],\n    [\"@babel/preset-react\", { \"runtime\": \"automatic\" }]\n  ]\n}\n```\n\n### With swc\n\n[Example](./examples/swc)\n\nInstall dependencies:\n\n```bash\nnpm i --save-dev @swc/core swc-loader\n```\n\nCreate `.swcrc`:\n\n```json\n{\n  \"jsc\": {\n    \"parser\": {\n      \"syntax\": \"ecmascript\",\n      \"jsx\": true\n    },\n    \"transform\": {\n      \"react\": {\n        \"runtime\": \"automatic\"\n      }\n    }\n  }\n}\n```\n\n## Recommended Configs\n\nAiming to be simple, this does not include configs that are helpful to development. The following shows how to re-enable them.\n\n\u003cdetails\u003e\n\u003csummary\u003eSource map\u003c/summary\u003e\n\n[source-map-loader](https://webpack.js.org/loaders/source-map-loader/)\n\n```js\nmodule.exports = async (env, argv) =\u003e {\n  const isEnvProduction = argv.mode === \"production\" || env.production;\n  const webpackConfig = await createConfig(isEnvProduction);\n  return merge(webpackConfig, {\n    devtool: isEnvProduction ? \"source-map\" : \"eval-source-map\",\n    module: {\n      rules: [\n        {\n          test: /\\.(js|mjs|jsx|ts|tsx|css)$/,\n          exclude: /@babel(?:\\/|\\\\{1,2})runtime/,\n          enforce: \"pre\",\n          use: [\"source-map-loader\"],\n        },\n      ],\n    },\n  });\n};\n```\n\n\u003c/details\u003e\n\n## Configurations\n\nAn options param can passed as the second argument to `createConfig`.\n\n```js\ncreateConfig(isEnvProduction, options);\n```\n\n- `moduleFileExtensions`: A list of module file extension to resolve. Default: `[\"web.mjs\",\"mjs\",\"web.js\",\"js\",\"web.ts\",\"ts\",\"web.tsx\",\"tsx\",\"json\",\"web.jsx\",\"jsx\"]`.\n- `pathEntry`: Path to entry file. Default: `./src/index.js`.\n- `pathSrc`: Path to src directory (will be proccessed by babel-loader/swc-loader). Default: `./src`.\n- `pathHtml`: Path to HTML file. Default: `./public/index.html`.\n- `pathBuild`: Path to build output directory. Default: `./build`.\n- `pathPublic`: Path to \"public\" folder (will be copied to build directory). Default: `./public`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangvvo%2Fwebpack-config-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoangvvo%2Fwebpack-config-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangvvo%2Fwebpack-config-react/lists"}