Webpack-Dev-Server 未显示更改的最新文件

Question

我正在尝试运行一个使用带有 HMR 和源映射的 webpack 开发服务器的项目，但我遇到了问题。当我单独使用 webpack 和我的配置文件时，源映射在控制台输出中指示，HMR 在页面刷新上工作，但没有服务器。当我尝试使用 webpack-dev-server 运行脚本时，控制台中没有指示正在生成源映射并且没有呈现更改（自动或在页面刷新时），而重新编译出现在控制台输出中.

这是我的配置文件

/*
    Webpack Configuration File
    webpack.config.js
    ===
    Webpack configuration file for the, "Debugging Webpack Issues" project.

    @version:0.1.1

*/

const webpack = require( "webpack" );
const path = require( "path" );
const htmlWebpackPlugin = require( "html-webpack-plugin" );

const BUILD_PATH = path.resolve( __dirname, "../build" );
const SOURCE_PATH = path.resolve( __dirname, "../src" );
console.log(BUILD_PATH);
console.log(SOURCE_PATH);

let config = {
    entry: SOURCE_PATH + "/index.js",
    output: {
        path: BUILD_PATH + "/rsc/scripts/",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                options: {
                    "presets" : [ "es2015", "react" ]
                },
                exclude: [/node_modules/],
                include: SOURCE_PATH
            },
            {
                test: /\.css$/,
                use: [ "style-loader", "css-loader" ],
                include: SOURCE_PATH,
                exclude: [/node_modules/]
            }
        ]
    },
    devServer: {
        compress: true,
        port:9000,
        open: true,
        hot: true,
        contentBase: BUILD_PATH
    },
    devtool: "source-map",
    watch: true,
    target: "web",
    plugins: [
        new htmlWebpackPlugin({
            title: "Example React App",
            filename: "../../index.html",
            template: SOURCE_PATH + "/template.html" 
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
};

module.exports = config;

我知道 webpack-dev-server 可能不会更新，因为它正在尝试从静态位置加载，但我已尝试更改其他人在其项目中指定的文件（例如将 publicPath 添加到文件）这个问题没有成功。

Answer 1

Webpack 的 publicPath 值需要相对于输出中的构建目录。

这是我的 webpack 配置文件的工作版本：

/*
    Webpack Configuration File
    webpack.config.js
    ===
    Webpack configuration file for the, "Debugging Webpack Issues" project.

    @version:0.1.1

*/

const webpack = require( "webpack" );
const path = require( "path" );
const htmlWebpackPlugin = require( "html-webpack-plugin" );

const BUILD_PATH = path.resolve( __dirname, "../build" );
const SOURCE_PATH = path.resolve( __dirname, "../src" );
const PUBLIC_PATH = "/rsc/scripts/";

console.log(BUILD_PATH);
console.log(SOURCE_PATH);

let config = {
    entry: SOURCE_PATH + "/index.js",
    output: {
        path: BUILD_PATH + PUBLIC_PATH,
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                options: {
                    "presets" : [ "es2015", "react" ]
                },
                exclude: [/node_modules/],
                include: SOURCE_PATH
            },
            {
                test: /\.css$/,
                use: [ "style-loader", "css-loader" ],
                include: SOURCE_PATH,
                exclude: [/node_modules/]
            }
        ]
    },
    devServer: {
        compress: true,
        port:9000,
        open: true,
        hot: true,
        contentBase: BUILD_PATH,
        publicPath: PUBLIC_PATH
    },
    devtool: "source-map",
    watch: true,
    target: "web",
    plugins: [
        new htmlWebpackPlugin({
            title: "Example React App",
            filename: "../../index.html",
            template: SOURCE_PATH + "/template.html" 
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ]
};

module.exports = config;

遇到此问题的任何人都应确保在devServer 配置选项中设置了publicPath。 publicPath 应该被视为您的服务器的 html 文件应该从中获取 bundle.js 的路径（相对于构建目录）。

我的 Build 文件夹中的项目结构如下所示：

./build
./build/rsc/scripts/bundle.js
./build/index.html

所以我的publicPath 需要设置为/rsc/scripts，以便它知道从哪里获取虚拟文件。