Как сделать, чтобы автоматический добавлялся путь к стилям?

Question

[Im p3l]

Добрый день,
как сделать, чтобы путь к стилям автоматический добавлялся в html файл после сборки. А также создавался как отдельный файл и находился в папке сборки.
Сейчас он встраивается через js.

{
  "name": "test_task",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --watch",
    "build": "rimraf public && webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "autoprefixer": "^9.7.1",
    "babel-loader": "^8.0.6",
    "copy-webpack-plugin": "^5.0.5",
    "css-loader": "^3.2.0",
    "cssnano": "^4.1.10",
    "file-loader": "^4.2.0",
    "glob": "^7.1.6",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "rimraf": "^3.0.0",
    "sass-loader": "^7.3.1",
    "style-loader": "^1.0.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "yargs": "^14.2.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.7.0"
  }
}

const path = require('path');
const glob = require('glob');
const argv = require('yargs').argv;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const isDev = 'development';
const isProd = !isDev;
const distPath = path.join(__dirname, '/public');

module.exports = {
	entry: {
		main: __dirname + '/src/main/index.js'
	},
	output: {
		filename: 'main.js',
		path: distPath
	},
	module:
		{
		rules: [{
			test: /\.html$/,
			use: 'html-loader'
		}, {
			test: /\.js$/,
			exclude: /node_modules/,
			use: [{
				loader: 'babel-loader'
			}]
		}, {
			test: /\.scss$/,
			exclude: /node_modules/,
			use: [
				isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
				'css-loader',
				{
					loader: 'postcss-loader',
					options: {
						plugins: [
							isProd ? require('cssnano') : () => {
							},
							require('autoprefixer')({
								browsers: ['last 2 versions']
							})
						]
					}
				},
				'sass-loader'
			]
		}, {
			test: /images[\\\/].+\.(gif|png|jpe?g|svg)$/i,
			use: [{
				loader: 'file-loader',
				options: {
					name: 'images/[name].[ext]'
				}
			},
			]
		}, {
			test: /fonts[\\\/].+\.(otf|eot|svg|ttf|woff|woff2)$/i,
			use: {
				loader: 'file-loader',
				options: {
					name: 'fonts/[name].[ext]'
				}
			},
		}
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css',
			chunkFilename: '[id].css'
		}),
		...glob.sync('./src/*.html')
			.map(htmlFile => {
				return new HtmlWebpackPlugin({
					filename: path.basename(htmlFile),
					inject: true,
					template: htmlFile
				});
			})
	],
	optimization: isProd ? {
		minimizer: [
			new UglifyJsPlugin({
				sourceMap: true,
				uglifyOptions: {
					compress: {
						inline: false,
						drop_console: true
					},
				},
			}),
		],
	} : {},
	devServer: {
		contentBase: distPath,
		port: 9000,
		compress: true,
		open: true
	}
};