Question

webpack.config.js

module.exports = {
    mode: "development",
    optimization: {
        usedExports: true,
    },
    entry: ["@babel/polyfill", "./src/index.js"],
    output: {
        filename: "build.js",
        path: path.join(__dirname, "/dist/app"),
        chunkFilename: '[name].js',
        publicPath: "/app"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader",
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader?sourceMap=true"],
            },
            {
                test: /\.svg$/,
                use: ["@svgr/webpack"],
            }
        ],
    },
    plugins: [
        new HWP({ template: path.join(__dirname, "/src/index.html") }),
        new CopyPlugin({
            patterns: [
                { from: path.join(__dirname, 'public'), to: path.resolve(__dirname, 'dist/app', 'public') }
            ],
        })
    ],
    devServer: {
        //for Cannot GET /login error
        historyApiFallback: true,
        host: "localhost",
        port: "8000"
    },
    externals: [
        {
            config: {
                //scope for back end configurations
            },
        },
    ],
};

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">      
    <link href="/public/css/font-awesome.min.css" rel="stylesheet">
    <link rel='stylesheet' href='/public/css/bootstrap-4-latest.min.css'>
    <link href="/public/css/common.css" rel="stylesheet">
    <link href="/public/css/main.css" rel="stylesheet">
    <link href="/public/css/responsive.css" rel="stylesheet">
    <title>Test</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

问题

当我创建构建时，我必须在CSS URL中在“ / public”之前外部附加“ / app”，但是我不想手动执行，它应该在浏览器中自动创建正确的链接例如：-

通过检查浏览器获得的

不正确链接 http：// localhost：8000 / public / css / font-awesome.min.css

我想要的正确链接 http：// localhost：8000 / app / public / css / font-awesome.min.css

有人可以解释一下webpack.config.js出什么问题吗

从错误的网址加载公共路径

0 个答案: