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

Question

我正在尝试获得一个项目运行ning，该项目使用带有 HMR 和源映射的 webpack 开发服务器，但运行ning 遇到了问题。当我单独使用 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 以便它知道从哪里获取虚拟文件。

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

Webpack-Dev-Server not showing latest files on change

javascript

webpack

webpack-dev-server