Webpack 开发服务器在重建文件时不重新加载页面

Question

我目前正在尝试打开我的 webpack-dev-server，但是当我保存我的文件并且已经正确重建时，我的页面不会重新加载。

我使用这个脚本来执行：

"start": "webpack-dev-server --mode development --host myIP --port 8080"（我也试过 --hot --inline 但没用）

这是我的 webpack 配置：

const path = require('path');
const basedir = path.join(__dirname, '../');

module.exports = {
    entry: {
        theme: path.join(basedir, 'assets/js', 'theme.js'),
        custom: path.join(basedir, 'assets/js', 'custom.js'),
    },
    output: {
        path: path.join(basedir, 'assets/js'),
        filename: '[name]real.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            }
        ]
    }
};

然后我导入 theme.js 例如：

<script src='http://myIP:8080/themereal.js'></script>

Answer 1

我也尝试了热模块替换，但没有用。

经过大量搜索，我在客户端控制台中看到以下错误：

Invalid Host/Origin header client:187:9
[WDS] Disconnected!

然后我搜索如何解决这个问题并找到了 --disable-host-check 选项，这对我有用！

"start": "webpack-dev-server --mode development --host myIP --port 8080 --disable-host-check"

我希望这对更多人有用！

Answer 2

您需要设置手表模式。这是我最近使用的示例文件。在开发模式下你不需要再设置任何属性。

webpack --mode development

此配置为 webpack 4+

const path = require('path');
const webpack = require('webpack');

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = (env, argv) => {
    const {
        mode
    } = argv;
    return {
        module: {
            entry: path.join(__dirname, 'src', 'app.js'),
            watch: mode !== 'production',
            output: {
                path: path.join(__dirname, 'dist'),
                filename: mode === 'production' ? 'bundle.min.js' : 'bundle.js'
            },
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
            ],
            plugins: [
                new HtmlWebPackPlugin({
                    title: 'App',
                    template: "./src/index.html",
                    filename: "./index.html"
                })
            ]
        },
        devServer: {
            contentBase: path.join(__dirname, 'dist')
        }
    };
}

Webpack 开发服务器在重建文件时不重新加载页面

Webpack dev server don't reload page when rebuild file

javascript

webpack

webpack-dev-server