https://github.com/phothinmg/webpack-react-typescript-mdx-boilerplate
Webpack React Typescript Mdx Boilerplate
https://github.com/phothinmg/webpack-react-typescript-mdx-boilerplate
mdx-js react stater-kit typescript webpack
Last synced: 5 months ago
JSON representation
Webpack React Typescript Mdx Boilerplate
- Host: GitHub
- URL: https://github.com/phothinmg/webpack-react-typescript-mdx-boilerplate
- Owner: phothinmg
- Created: 2024-03-01T04:53:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-01T16:01:39.000Z (over 2 years ago)
- Last Synced: 2025-02-10T22:46:51.201Z (over 1 year ago)
- Topics: mdx-js, react, stater-kit, typescript, webpack
- Language: CSS
- Homepage: https://webpack-react-typescript-mdx-boilerplate.vercel.app
- Size: 26.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Webpack React Typescript Mdx Boilerplate
---
Live Example: https://webpack-react-typescript-mdx-boilerplate.vercel.app/
---
Download or clone the repo.
```bash
pnpm i
```
```bash
pnpm dev
```
Dev server at : http://localhost:5454
You can edit this page at -> `app/post.mdx`
---
## **About**
Only how to configure Webpack for React, Typescript and support MDX.
See in `webpack.config.json`.
---
## Example Config File
```js
import path from "node:path";
import { fileURLToPath } from "node:url";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import FaviconsWebpackPlugin from "favicons-webpack-plugin";
import remarkGfm from "remark-gfm";
import rehypePrism from "rehype-prism-plus";
import remarkEmbedImages from "remark-embed-images";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
/** @type {import('webpack').Configuration} */
const webpackConfig = {
mode: "development",
entry: "./app/index.tsx",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js",
},
devServer: {
static: {
directory: path.resolve(__dirname, "./dist"),
},
port: 5454,
open: true,
hot: true,
compress: true,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
},
{
loader: "ts-loader",
},
],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
},
{
test: /\.mdx?$/,
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["@babel/plugin-transform-object-rest-spread"],
},
},
{
loader: "@mdx-js/loader",
/** @type {import('@mdx-js/loader').Options} */
options: {
providerImportSource: "@mdx-js/react",
remarkPlugins: [remarkGfm, remarkEmbedImages],
rehypePlugins: [rehypePrism],
},
},
],
exclude: /node_modules/,
},
{
test: /\.svg$/,
loader: "svg-inline-loader",
},
],
},
resolve: {
extensions: [".tsx", ".ts", ".js", ".css", ".md", ".mdx"],
},
plugins: [
new HtmlWebpackPlugin({
title: "Home",
filename: "index.html",
template: "./app/index.html",
}),
new MiniCssExtractPlugin(),
new FaviconsWebpackPlugin("./app/favicon.ico"),
],
};
export default webpackConfig;
```