无法从dist文件夹中的webpack生成的index.html中引用javascript和css文件

Question

After I introduced Routes on my app I started to face problem when of getting not found page when made changes on my code.

I googled it and i found out that on my webpack i need to add something like:

publicPath: '/',
historyApiFallback: true,

After the change i made by adding the above into my webpack when running npm run build it generates a dist folder with index.html bundle.css and bundle.js but the reference files are not like:

<link href="/bundle.css" rel="stylesheet">

it used to be as:

<link href="bundle.css" rel="stylesheet">

so basically the production mode is not showing error of 404 not found file.

WHole Webpack file looks as following:

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

module.exports = (env, argv) => {
    console.log("ENV DETECTED: " + argv.mode);
    return {
        entry: './src/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js',
            publicPath: '/',
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: [
                        {
                            loader: "html-loader",
                            options: {
                                minimize: true
                            }
                        }
                    ]
                },
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        // 'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                minimize: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                config: {
                                    path: './postcss.config.js'
                                }
                            }
                        }
                    ]
                },
                {
                    test: /\.scss$/,
                    use: [
                        argv.mode !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                minimize: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                config: {
                                    path: './postcss.config.js'
                                }
                            }
                        },
                        "sass-loader"
                    ]
                }
            ],
        },
        devServer: {
            historyApiFallback: true,
        },
        plugins: [
            new CleanWebpackPlugin('dist', {}),
            new HtmlWebPackPlugin({
                template: "src/index.html",
                filename: "./index.html"
            }),
            new MiniCssExtractPlugin({
                filename: "bundle.css",
                chunkFilename: "bundle.css"
            }),
            require('autoprefixer'),
        ]
    } 
};

So if i want to not have problem with referencing files from my index.html within /dist I can just comment publicPath: '/', from webpack but then I have problem i have to refresh my browser to see my latest changes.

I dont know how can I fix so that I can reference files from index.html and at the same time being able to use publicPath: '/', so i dont have problem with livereload!

Answer 1

Check the file paths. Using a relative file path starting from where ur file is located.

Assuming ur file path is in public/css/bundle.css and ur index.html is in the root folder. Your link tag will look like this:

<Link href = "./public/css/bundle.css" relax="text/stylesheet">