Our great sponsors
-
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.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
react-refresh-webpack-plugin
A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
-
-
-
browserslist
🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env
-
-
typescript-plugin-css-modules
A TypeScript language service plugin providing support for CSS Modules.
-
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
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;
🙏 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
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.
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.
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.
