const path = require("path") const HtmlWebpackPlugin = require("html-webpack-plugin") const MiniCssExtractPlugin = require("mini-css-extract-plugin") module.exports = { mode: "development", entry: { bundle: path.resolve(__dirname, "src", "index.tsx") }, output: { filename: "[name].[contenthash].js", path: path.resolve(__dirname, "dist") }, module: { rules: [ { test: /\.tsx?/, use: 'ts-loader', exclude: /node_modules/ }, { test: /\.jsx?$/, include: path.resolve(__dirname, 'src'), exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { "targets": "defaults" }], '@babel/preset-react' ] } } }, { test: /\.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings "style-loader", // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], }, { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], }, ] }, resolve: { extensions: [".tsx", ".jsx", ".js"], }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, "src", "html", "template.html"), filename: "index.html", title: "React with Webpack", }) ] }