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)