webpack-typescript-react - GitLite

KO | EN

gitlite — search

#javascript #python #react #typescript #llm #golang #android #machine-learning #deep-learning #docker #java #awesome #awesome-list #ios

webpack-typescript-react

(★ 210)

Webpack 5 boilerplate with support of most common loaders and modules (see tags and description)

File Explorer

Download Latest Version (.zip)

- - declarations.d.ts
- - .gitkeep
- - strawberry.component.svg
- - styles.css
  - styles.less
  - styles.scss
- index.html
- index.tsx
- - alias.js
  - devServer.js
  - devServierProxy.js
  - externals.js
  - index.js
  - postcss.js
  - sassResources.js
- - index.js
  - pluginCleanWebpack.js
  - pluginCopy.js
  - pluginDefine.js
  - pluginEsLint.js
  - pluginForkTsChecker.js
  - pluginHtml.js
  - pluginMiniCssExtract.js
  - pluginProvide.js
- - common.js
  - index.js
  - styles.js
  - svg.js
  - useLoaderRuleItems.js
- - cleanConsoleOnHMR.js
  - env.js
  - helpers.js
- base.js
- dev.js
- entry.js
- optimization.js
- prod.js
.babelrc.js
.eslintignore
.eslintrc.js
.gitignore
.importSortPrefixrc
.lintstagedrc
.prettierignore
.prettierrc
LICENSE
package.json
README.md
tsconfig.json
webpack.config.babel.js

# Installation Guide

1. Get the code

git clone https://github.com/glook/webpack-typescript-react

Downloads the entire project code from GitHub to your computer.

cd webpack-typescript-react

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Webpack 5 boilerplate

![](https://habrastorage.org/webt/q-/lv/b0/q-lvb0d4li7cpi-hsctistlzooi.png)

[Webpack 5](https://webpack.js.org/) boilerplate with support of most common loaders and modules:

-   [babel](https://babeljs.io/)
-   typescript (using [ForkTsCheckerWebpack](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin) )
-   sass, less, [css modules](https://github.com/css-modules/css-modules) with automatic typescript declaration
-   with react support (also with [react-refresh](https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin))
-   [esLint](https://www.npmjs.com/package/eslint)
-   [prettier](https://www.npmjs.com/package/prettier) (with import sorting using [prettier-plugin-import-sort](https://www.npmjs.com/package/prettier-plugin-import-sort), [import-sort-style-module-and-prefix](https://www.npmjs.com/package/import-sort-style-module-and-prefix))
-   [webpack dev server](https://webpack.js.org/configuration/dev-server/) ([proxy](https://webpack.js.org/configuration/dev-server/#devserverproxy) support is also available)
-   importing svg as react components using [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack)
-   postcss loader (with [autoprefixer](https://www.npmjs.com/package/autoprefixer) and [cssnano](https://www.npmjs.com/package/cssnano))
-   [husky](https://www.npmjs.com/package/husky) prehooks and [lint-staged](https://www.npmjs.com/package/lint-staged)

## Quick start

To run this locally:

1. run `git clone https://github.com/glook/webpack-typescript-react.git sample-project`
2. Install all dependencies using `yarn` or `npm install`
3. Start the development server using `yarn start` or `npm run start`
4. Open up [http://localhost:8080](http://localhost:8080)