webpack-react-typescript-template

A template for react app using webpack and typesciprt

webpack

Please see webpack.dev.config.js for details. Use babel-loader to enable babel for typescript. Plugins used:

• ForkTsCheckerWebpackPlugin. Since babel itself does no check type of typescript language, so we include this plugin to run typescript type checker on a separate process.

• MiniCssExtractPlugin. Used as css loader.

• HtmlWebpackPlugin. The html loader.

• CleanWebpackPlugin. Clean webpack's output every bulid.

• nodeExternals. Need this to avoid error when working with Express.

Babel

Please see .babelrc.js for details. We mainly use @babel/typescript and @babel/react presets to compile files.

Eslint

Typescript now include eslint support in its roadmap. Use @typescript-eslint plugin to run lint on typescript. For more details, please refer to .eslint.js.

Prettier

One of the most popular code formatter. The config lies on .prettier.config.js.

Lint-staged

Lint check before git commit. Run linters against staged git files.

Editorconfig

Code style and file formatter supported by almost all editors.