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;

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

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

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

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

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

1 个答案: