I published a new section in my (still) free webpack course. If you look for quick inspiration, my final config is webpack.config.js:
const MiniCssExtractPlugin = require("mini-css-extract-plugin"), HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { plugins: [ new MiniCssExtractPlugin(), new HtmlWebpackPlugin({ title: "Contact App" }), ], mode: "production", devtool: "nosources-source-map", module: { rules: [ { test: /\.html$/i, loader: "html-loader", }, { test: /\.ts$/, use: "ts-loader", exclude: /node_modules/, }, { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], }, { test: /\.scss$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, { test: /\.png/, type: "asset", parser: { dataUrlCondition: { maxSize: 10 * 1024, // 10kb }, }, }, ], }, resolve: { extensions: [".ts", ".js"], }, }; If you are interested in a full explanation in the video form, you can sign up for my course here.
Top comments (0)