How to add a <link> tag for CSS file

[AlexeyKosov]

I use webpack with mini-css-extract-plugin and html-webpack-plugin and expect the plugins to add a tag for CSS, but for some reason the CSS file is injected via JS rather than a tag. Is there some option in the config that I'm missing?

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        app1: './src/app1.js',
    },
    output: {
        filename: 'js/[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
            template: "template.html",
            filename: (entryName) => entryName + '.html',
        }),
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
};

Test repo: https://github.com/AlexeyKosov/test-webpack/tree/single

[AlexeyKosov]

Figured it out - I used a dynamic import instead of static.