Webpack server doesn’t load my css and js files in a html page

  css, html, javascript, webpack

I just setup webpack for the first time to bundle my vanilla JS project and I tried loading my index.html page but somehow it refuses to apply the style and it can’t find my .js files.

I’ve tried changing the path by adding a / infront of the path but it still doesn’t work.
I also tried adding type="text/css" for <link rel>.

Directory Tree



const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        library: 'MyAuthLibrary',
        libraryTarget: 'umd',
    devtool: "source-map",
    module: {
        rules: [
                test: /.js$/,
                exclude: /node_modules/
                test: /.m?jsx?$/,
                resolve: {
                    fullySpecified: false,
                    fallback: {
                        "crypto": false
    devServer: {
        contentBase: './dist',
        overlay: true,
        hot: true,
        port: 8090,
        open: true
    plugins: [
        new CopyWebpackPlugin({
            patterns: ['*.html']
        new webpack.HotModuleReplacementPlugin()


<link rel="stylesheet" type="text/css" href="assets/css/qrGenerator.css">
<link rel="stylesheet" type="text/css" href="assets/css/menu.css">
<script src="assets/js/qrcode.js"></script>
<script src="assets/js/saveSvgAsPng.js"></script>
<script src="assets/js/svg_to_pdf.js"></script>
<script src="assets/js/moment.js"></script>

Console Error

enter image description here

Source: Ask Javascript Questions