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

Question

在我的应用中引入 Routes 后，我开始遇到在更改代码时找不到页面的问题。

我用谷歌搜索了它，发现在我的 webpack 上我需要添加类似的内容：

publicPath: '/',
historyApiFallback: true,

在运行 npm run build 时通过将上述内容添加到我的 webpack 中进行更改后，它会生成一个带有 index.html bundle.css 和 bundle.js 的 dist 文件夹，但参考文件并不像：

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

以前是这样的：

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

所以基本上生产模式没有显示404找不到文件的错误。

整个 Webpack 文件如下所示：

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

因此，如果我不想在 /dist 中从我的 index.html 引用文件时遇到问题，我可以从 webpack 中评论 publicPath: '/', 但是我有问题我必须刷新我的浏览器以查看我的最新更改。

我不知道如何修复，以便我可以从 index.html 引用文件，同时能够使用 publicPath: '/'，所以我对 livereload 没有问题！

Answer 1

检查文件路径。使用从你的文件所在位置开始的相对文件路径。

假设你的文件路径在 public/css/bundle.css 并且你的 index.html 在根文件夹中。您的链接标签将如下所示：

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