-
webpack
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
import path from 'path'; import webpack from 'webpack'; import HTMLWebpackPlugin from 'html-webpack-plugin'; //create css file per js file: https://webpack.kr/plugins/mini-css-extract-plugin/ import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; const isDevelopment = process.env.NODE_ENV !== 'production'; // define plugins const plugins: webpack.WebpackPluginInstance[] = [ new HTMLWebpackPlugin({ template: './public/index.html', // you have to have the template file }), ]; isDevelopment ? plugins.push(new ReactRefreshWebpackPlugin()) : plugins.push(new MiniCssExtractPlugin()); const config: webpack.Configuration = { mode: isDevelopment ? 'development' : 'production', devServer: { hot: true, port: 3000, }, entry: './src/index.tsx', // codes will be inside src folder output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', // more configurations: https://webpack.js.org/configuration/ }, plugins, resolve: { modules: [path.resolve(__dirname, './src'), 'node_modules'], // automatically resolve certain extensions (Ex. import './file' will automatically look for file.js) extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss', '.css'], alias: { // absolute path importing files '@pages': path.resolve(__dirname, './src/pages'), }, }, module: { rules: [ { test: /\.html$/, use: ['html-loader'], }, { test: /\.(js|jsx|ts|tsx)$/, exclude: /node_modules/, use: [ { loader: require.resolve('babel-loader'), options: { plugins: [ isDevelopment && require.resolve('react-refresh/babel'), ].filter(Boolean), }, }, ], }, { test: /\.(sa|sc|c)ss$/i, // .sass or .scss use: [ // Creates `style` nodes from JS strings 'style-loader', // Translates CSS into CommonJS 'css-loader', // for Tailwind CSS 'postcss-loader', // Compiles Sass to CSS 'sass-loader', ], }, ], }, }; export default config;
-
InfluxDB
Purpose built for real-time analytics at any scale. InfluxDB Platform is powered by columnar analytics, optimized for cost-efficient storage, and built with open data standards.
-
🙏 Please visit my GitHub repository for more settings and codes.
-
why I use @babel/preset-typescript over ts-loader and awesome-typescript-loader to complie TypeScript? it's blazingly faster than the others and has more perks(read #4) ts-loader doesn't natively support HMR(Hot Module Replacement) awesome-typescript-loader's latest release is on Jun 22, 2018 TypeScript With Babel: A Beautiful Marriage - Matt Turnbull's Post
-
why I use @babel/preset-typescript over ts-loader and awesome-typescript-loader to complie TypeScript? it's blazingly faster than the others and has more perks(read #4) ts-loader doesn't natively support HMR(Hot Module Replacement) awesome-typescript-loader's latest release is on Jun 22, 2018 TypeScript With Babel: A Beautiful Marriage - Matt Turnbull's Post
-
react-refresh-webpack-plugin
A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
as mentioned above, we're using the webpack; therefore, we're going to use @pmmmwh/react-refresh-webpack-plugin to apply the Fast Refresh feature to our app. I mean, it's for development, so what's the harm of trying it right?
-
webpack-cli(v5.0.1): enables you to use the command-line interface of the Webpack
-
react(v18.2.0) : The react package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
-
react-router-dom(v6.4.4): contains bindings for using React Router in web applications.
-
babel-loader(v9.1.0): allows transpiling JavaScript files using Babel and webpack.
-
w/ postcss-preset-env(v7.8.3): convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments. It takes the support data that comes from MDN and Can I Use and determine from a browserlist whether those transformations are needed. It also packs Autoprefixer within and shares the list with it, so prefixes are only applied when you're going to need them given your browser support list.
-
browserslist
🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
w/ postcss-preset-env(v7.8.3): convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments. It takes the support data that comes from MDN and Can I Use and determine from a browserlist whether those transformations are needed. It also packs Autoprefixer within and shares the list with it, so prefixes are only applied when you're going to need them given your browser support list.
-
w/ postcss-preset-env(v7.8.3): convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments. It takes the support data that comes from MDN and Can I Use and determine from a browserlist whether those transformations are needed. It also packs Autoprefixer within and shares the list with it, so prefixes are only applied when you're going to need them given your browser support list.
-
typescript-plugin-css-modules
A TypeScript language service plugin providing support for CSS Modules.
-
-
-
SaaSHub
SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives
