Live Example: https://webpack-react-typescript-mdx-boilerplate.vercel.app/
Download or clone the repo.
pnpm i
pnpm dev
Dev server at : http://localhost:5454
You can edit this page at -> app/post.mdx
Only how to configure Webpack for React, Typescript and support MDX.
See in webpack.config.json
.
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;