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

index.html
assets
|-css
  |-qrGenerator.css
  |-menu.css
|-js
  |-qrcode.js
  |-saveSvgAsPng.js
  |-svg_to_pdf.js
  |-moment.js

webpack.config.js

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()
    ]
};

index.html

<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

LEAVE A COMMENT