Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/DiegoTeles/react-base-webpack-config-ts
React v17.0.2 with TypeScript
https://github.com/DiegoTeles/react-base-webpack-config-ts
Last synced: 8 days ago
JSON representation
React v17.0.2 with TypeScript
- Host: GitHub
- URL: https://github.com/DiegoTeles/react-base-webpack-config-ts
- Owner: DiegoTeles
- Created: 2021-04-28T15:32:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-04-28T17:05:52.000Z (over 3 years ago)
- Last Synced: 2024-08-01T21:49:53.332Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 717 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
## Template Reactjs with typescript
React v17.0.2 with TypeScript
_In this project we have basic settings to work with Typescript, Babel, images, CSS, SASS and Fast Refresh to avoid unnecessary state changes._
## **Used libs**
### **For cross platform environment variable**
* [cross-env](https://www.npmjs.com/package/cross-env)
### **Loaders for webpack rules**
* [babel-loader](https://www.npmjs.com/package/babel-loader)
* [css-loader](https://www.npmjs.com/package/css-loader)
* [file-loader](https://www.npmjs.com/package/file-loader)
* [sass-loader](https://www.npmjs.com/package/sass-loader)
* [url-loader](https://www.npmjs.com/package/url-loader)
### **SASS**
* [node-sass](https://www.npmjs.com/package/node-sass)
### **Image Optimizers**
* [imagemin-gifsicle](https://www.npmjs.com/package/imagemin-gifsicle)
* [imagemin-jpegtran](https://www.npmjs.com/package/imagemin-jpegtran)
* [imagemin-mozjpeg](https://www.npmjs.com/package/imagemin-mozjpeg)
* [imagemin-optipng](https://www.npmjs.com/package/imagemin-optipng)
* [imagemin-pngquant](https://www.npmjs.com/package/imagemin-pngquant)
* [imagemin-svgo](https://www.npmjs.com/package/imagemin-svgo)
* [image-minimizer-webpack-plugin](https://www.npmjs.com/package/image-minimizer-webpack-plugin)### **Inject bundle**
* [html-webpack-plugin](https://www.npmjs.com/package/imagemin-svgo)### **Fast refresh components**
* [@pmmmwh/react-refresh-webpack-plugin](https://www.npmjs.com/package/@pmmmwh/react-refresh-webpack-plugin)### **Babel preset**
* [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env)
* [@babel/preset-typescript](https://www.npmjs.com/package/@babel/preset-typescript)
* [@babel/preset-react](https://www.npmjs.com/package/@babel/preset-react)### Babel config
```js
//babel.config.js
module.exports = {
presets: [
"@babel/preset-env", //that allows you to use the latest JavaScript without needing to micromanage which syntax transforms
"@babel/preset-typescript", // that allows you to use Typescript
[
"@babel/preset-react",
{
runtime: "automatic", // react refresh automatic. Default is classic
},
],
],
};
```