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开发服务器在重建文件时不重新加载页面

2 个答案: