const path = require("path") const HtmlWebpackPlugin = require("html-webpack-plugin") const MiniCssExtractPlugin = require("mini-css-extract-plugin") const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin") module.exports = (env, argv) => { const devMode = argv.mode !== 'production' return { mode: devMode ? "development" : "production", entry: { bundle: path.resolve(__dirname, "src", "index.tsx") }, output: { filename: devMode ? "[name].[contenthash:10].js" : "[name.js]", path: path.resolve(__dirname, "dist"), clean: true, publicPath: '/', sourceMapFilename: "[name].[contenthash:10].js.map" }, devtool: "source-map", devServer: { historyApiFallback: true }, 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: /\.(sa|sc|c)ss$/, use: [ // Creates `style` nodes from JS strings devMode ? 'style-loader' : MiniCssExtractPlugin.loader, // Translates CSS into CommonJS "css-loader", // Compiles Sass to CSS "sass-loader", ], } ] }, resolve: { extensions: [".tsx", ".jsx", ".js"], alias: { "@mui/styles": path.resolve(__dirname, "node_modules", "@mui/styles"), }, plugins: [new TsconfigPathsPlugin()] }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, "src", "html", "template.html"), filename: "index.html", title: "React with Webpack", }), ].concat(devMode ? [] : [new MiniCssExtractPlugin({ filename: '[name].css', chunkFilename: '[id].css' })]) } }