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

jljoyd4f 于 2022-11-13 发布在 Webpack

关注(0)|答案(2)|浏览(141)

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

/*
    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添加到文件），但没有成功。

webpack

来源：https://stackoverflow.com/questions/48307604/webpack-dev-server-not-showing-latest-files-on-change

2条答案

按热度按时间

uplii1fm1#

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，以便它知道从哪里获取虚拟文件。

赞(0）回复(0）举报 2022-11-13

olhwl3o22#

在我的例子中，项目是由create-react-app生成的。我的解决方案是：
配置文件/配置文件/配置文件配置文件
找到以下代码：

historyApiFallback: {
  // Paths with dots should still use the history fallback.
  // See https://github.com/facebook/create-react-app/issues/387.
  disableDotRule: true,
  index: paths.publicUrlOrPath,
},

删除上述代码，并按如下所示更新：

historyApiFallback: true,

hot: true,

赞(0）回复(0）举报 2022-11-13

我来回答

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

2条答案

相关问题

热门标签

最新问答