JSFiddle - React, Tailwind, and code Playground
JavaScript
import path from "path";
import webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import ESLintPlugin from "eslint-webpack-plugin";
import { CleanWebpackPlugin } from "clean-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";
import CssMinimizerPlugin from "css-minimizer-webpack-plugin";
import TerserPlugin from "terser-webpack-plugin";
const CSSModuleLoader = {
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]',
importLoaders: 2,
camelCase:true,
sourceMap: false,
}
}
const CSSLoader = {
loader: 'css-loader',
options: {
modules: "global",
importLoaders: 2,
camelCase: true,
sourceMap: false,
}
}
const PostCSSLoader = {
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: false,
}
}
const config: webpack.Configuration = {
mode: "production",
entry: "./src/index.tsx",
output: {
path: path.resolve(__dirname, "build"),
filename: "[name].[contenthash].js",
publicPath: "",
},
module: {
rules: [
{
test: /\.(ts|js)x?$/i,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript",
],
},
},
},
{
test: /\.(sa|sc|c)ss$/,
exclude: /\.module\.(sa|sc|c)ss$/,
use: [MiniCssExtractPlugin.loader, CSSLoader, PostCSSLoader, "sass-loader"]
},
{
test: /\.module\.(sa|sc|c)ss$/,
use: [MiniCssExtractPlugin.loader, CSSModuleLoader, PostCSSLoader, "sass-loader"]
}
],
},
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin()
]
},
resolve: {
extensions:...