{"id":23440773,"url":"https://github.com/dabapps/create-webpack-config","last_synced_at":"2025-04-09T20:37:28.647Z","repository":{"id":33152862,"uuid":"144871183","full_name":"dabapps/create-webpack-config","owner":"dabapps","description":"A utility for creating webpack configs with common settings","archived":false,"fork":false,"pushed_at":"2023-01-06T01:35:09.000Z","size":1265,"stargazers_count":1,"open_issues_count":19,"forks_count":0,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-04-02T04:03:35.258Z","etag":null,"topics":[],"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/dabapps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-15T15:32:56.000Z","updated_at":"2020-12-01T09:53:53.000Z","dependencies_parsed_at":"2023-01-14T23:40:04.272Z","dependency_job_id":null,"html_url":"https://github.com/dabapps/create-webpack-config","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabapps%2Fcreate-webpack-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabapps%2Fcreate-webpack-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabapps%2Fcreate-webpack-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dabapps%2Fcreate-webpack-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dabapps","download_url":"https://codeload.github.com/dabapps/create-webpack-config/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248108837,"owners_count":21049209,"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":[],"created_at":"2024-12-23T16:18:35.962Z","updated_at":"2025-04-09T20:37:28.629Z","avatar_url":"https://github.com/dabapps.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Create Webpack Config\n\n**A utility for creating webpack configs with common settings**\n\n## About\n\nThis utility will create a webpack config that should function as a drop-in for any Javascript or TypeScript project.\n\nIt features:\n\n- Tree shaking\n- Circular dependency checking\n- Synthetic default imports (TypeScript)\n- Project root alias (`^`)\n- Type checking in separate worker\n- Transpiling from ES6+ (and React) to target browsers\n- Polyfilling ES6+ features\n\n## Node support\n\nAs of version `0.4` Node less than `10.13` is not supported.\n\n## Installation\n\nInstall `@dabapps/create-webpack-config`:\n\n```shell\nnpm i @dabapps/create-webpack-config -P\n```\n\nInstall peer dependencies (TypeScript must be at least version 2):\n\n```shell\nnpm i typescript webpack@5 webpack-cli@4 core-js@3 @babel/core@7 @babel/generator@7 @babel/runtime@7 -P\n```\n\n## Setup\n\n### Creating your config\n\nCreate a file called `webpack.config.js` and add the following contents, adjusting options as desired.\n\nThis will bundle your `index.ts` file and all dependencies into a `bundle.js` in the `static/build/js` directory.\n\n`webpack.config.js`\n\n```js\nconst createWebpackConfig = require('@dabapps/create-webpack-config');\n\nmodule.exports = createWebpackConfig({\n  input: './static/src/ts/index.ts',\n  outDir: './static/build/js',\n  tsconfig: './tsconfig.dist.json',\n  env: {\n    NODE_ENV: 'production',\n  },\n});\n```\n\nIf you require multiple bundles you can supply an object as the `input`. Files will be created in the `outDir` with names corresponding to the keys in your `input` object.\n\nThe following config will create `static/build/js/frontend-bundle.js` and `static/build/js/admin-bundle.js`.\n\n`webpack.config.js`\n\n```js\nconst createWebpackConfig = require('@dabapps/create-webpack-config');\n\nmodule.exports = createWebpackConfig({\n  input: {\n    frontend: './static/src/ts/index.ts',\n    admin: './static/src/ts/admin.ts',\n  },\n  outDir: './static/build/js',\n  tsconfig: './tsconfig.dist.json',\n  env: {\n    NODE_ENV: 'production',\n  },\n});\n```\n\nIf you would like to be able to import \"raw\" files as strings, you can provide a `rawFileExtensions` option, with a list of file extension that should be imported as strings e.g.\n\n```js\n{\n  rawFileExtensions: ['html', 'xml', 'txt', 'csv'];\n}\n```\n\nIf you require multiple bundles, but your source files do not both have the same parent directory, you will have to manually supply a `rootDir` option in order to use the root dir alias (`^`) e.g.\n\n```js\n{\n  input: {\n    frontend: './src/frontend/index.ts',\n    admin: './src/admin/index.ts'\n  },\n  rootDir: './src'\n}\n```\n\nIn order to transpile files outside of the main file's parent directory or the specified `rootDir`, you will need to add an `include` option with the additional path(s) to transpile, though this is not usually necessary.\n\nThe `include` option can be either a string or array of strings.\n\n```js\n{\n  input: 'src/index.ts',\n  include: ['./examples', './docs']\n}\n```\n\n### Browser support\n\nCreate a `.browserslistrc` file in the root of your project and add the following contents, adjusting as desired.\n\nThis file is used by webpack, and other tools such as autoprefixer to make our code compatible with the browsers we want to support.\n\n`.browserslistrc`\n\n```\nlast 10 Chrome versions\nlast 10 Firefox versions\nlast 10 Edge versions\nlast 10 iOS versions\nlast 10 Android versions\nlast 10 Opera versions\nlast 10 Safari versions\nlast 10 ExplorerMobile versions\nExplorer \u003e= 9\n```\n\n### TypeScript base config\n\nCreate a `tsconfig.json` in the root of the project and add the following contents, adjusting `include`, `paths`, and `typeRoots` as needed.\n\nThis will contain all of our base TypeScript config.\n\nBy default `allowJs` is set to `false`. If your project contains Javascript you should set this to `true`.\n\nYou may enable type checking on Javascript files by setting `checkJs` to `true`. This can be useful if migrating a Javascript project to TypeScript.\n\n`allowSyntheticDefaultImports` and `esModuleInterop` allow us to import modules that don't have default exports as if they did, in TypeScript, so that we can be consistent across Javascript and TypeScript projects. E.g. `import React from 'react';` as opposed to `import * as React from 'react';`\n\n`tsconfig.json`\n\n```json\n{\n  \"compilerOptions\": {\n    \"strict\": true,\n    \"noImplicitAny\": true,\n    \"pretty\": true,\n    \"sourceMap\": true,\n    \"skipLibCheck\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"esModuleInterop\": true,\n    \"allowJs\": false,\n    \"checkJs\": false,\n    \"jsx\": \"react\",\n    \"target\": \"es6\",\n    \"moduleResolution\": \"node\",\n    \"typeRoots\": [\"./node_modules/@types/\", \"./static/src/ts/types/\"],\n    \"baseUrl\": \"./\",\n    \"paths\": {\n      \"^*\": [\"./static/src/ts*\"]\n    }\n  },\n  \"include\": [\"./static/src/ts/\"]\n}\n```\n\n### TypeScript distribution config\n\nCreate a `tsconfig.dist.json` file in the root of your project and add the following contents, adjusting `exclude`, or replacing with `include` as needed.\n\nThis is necessary to allow us to build our source without also type checking our tests or other Javascript and TypeScript files in the project.\n\n`tsconfig.dist.json`\n\n```json\n{\n  \"extends\": \"./tsconfig.json\",\n  \"exclude\": [\"./static/src/ts/__tests__/\", \"./static/src/ts/__mocks__/\"]\n}\n```\n\n### Build scripts\n\nAdd the following scripts to your `package.json`.\n\n`package.json`\n\n```json\n{\n  \"scripts\": {\n    \"build-js\": \"webpack --mode production\",\n    \"watch-js\": \"webpack --mode development --watch\"\n  }\n}\n```\n\n### Skipping type checking\n\nFor builds that have already been type checked you may want to skip type checking. This can be done by enabling the `skipTypeChecking` option e.g.\n\n```js\nmodule.exports = createWebpackConfig({\n  // ...\n  skipTypeChecking: true,\n});\n```\n\n### Skipping circular dependency checks\n\nFor builds that have already been checked for circular dependencies you may want to skip this step. This can be done by enabling the `skipCircularDependencyChecking` option e.g.\n\n```js\nmodule.exports = createWebpackConfig({\n  // ...\n  skipCircularDependencyChecking: true,\n});\n```\n\n## Code of conduct\n\nFor guidelines regarding the code of conduct when contributing to this repository please review [https://www.dabapps.com/open-source/code-of-conduct/](https://www.dabapps.com/open-source/code-of-conduct/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabapps%2Fcreate-webpack-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdabapps%2Fcreate-webpack-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdabapps%2Fcreate-webpack-config/lists"}