Webpack 开发服务器不自动重新加载

2024-02-27

所以我设置了 webpack 并webpack-dev-server, but webpack-dev-server不自动重新加载。如果我修改文件并保存它,则浏览器中不会发生任何更改,直到我手动刷新。

这是我的 webpack 配置和运行的脚本文件webpack-dev-server。有没有人看到任何可能阻止自动重新加载工作的东西?

我通过阅读多个教程、文档以及阅读react-create-app生成的文件。


配置/webpack.config.dev.js

'use strict';

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');

const extractSass = new ExtractTextPlugin('style.css');

module.exports = {
    entry : './src/index.jsx',
    eslint: {configFile: './src/.eslintrc.json'},
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                include: ['src'],
                loader: 'babel',
                test  : /(\.js|\.jsx)$/
            },
            {
                exclude: /node_modules/,
                include: ['src']
                loader : extractSass.extract([ 'css', 'postcss', 'sass' ]),
                test   : /\.scss$/
            }
        ],
        preLoaders: [
            {
                exclude: /node_modules/,
                loader : 'eslint',
                query  : {presets: [ 'react', 'latest' ]},
                test   : /(\.js|\.jsx)$/
            }
        ]
    },
    output: {
        filename  : 'bundle.js',
        path      : 'dist',
        publicPath: '/'
    },
    plugins: [
        extractSass,
        new HtmlWebpackPlugin({
            inject  : true,
            template: paths.appHtml
        }),
        new webpack.HotModuleReplacementPlugin({multistep: true})
    ],
    postcss: () => [
        autoprefixer({
            browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9'
            ]
        })
    ]
};

脚本/dev.js

运行与$ yarn run dev

'use strict';

const WebpackDevServer = require('webpack-dev-server');
const config           = require('../config/webpack.config.dev.js');
const webpack          = require('webpack');

const compiler = webpack(config);

const server = new WebpackDevServer(compiler, {
    clientLogLevel    : 'warn',
    compress          : true,
    contentBase       : 'public',
    filename          : config.output.filename,
    historyApiFallback: true,
    hot               : true,
    inline            : true,
    lazy              : false,
    noInfo            : true,
    publicPath        : '/',
    quiet             : true,
    stats             : 'errors-only',
    watchOptions      : {
        aggregateTimeout: 300,
        poll            : 1000
    }
});

server.listen(8080, 'localhost', () => {
    console.log('Listening on port 8080');
});

根据webpack 开发服务器文档 https://webpack.github.io/docs/webpack-dev-server.html#inline-mode-with-node-js-api您应该将此入口点添加到 webpack 配置中以支持自动刷新。

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Webpack 开发服务器不自动重新加载 的相关文章

随机推荐

  • 如何从 javascript HTMLCollection 获取元素

    我不明白为什么我无法从 HtmlCollection 获取元素 此代码示例 var col document getElementsByClassName jcrop holder console log col 在控制台上产生以下输出 我
  • cv::warpPerspective 仅显示扭曲图像的一部分

    我使用 getHomography 和 warpPerspective 将图像从前视角更改为中视角 它的工作原理是图像扭曲到所需的视角 但裁剪被关闭 它将扭曲的图像大部分移动到图像框之外 我认为原因是因为操作导致负坐标 我已经手动计算了用于
  • Web API 令牌方案的好方法是什么?

    我正在为一个 Web 应用程序开发 REST API 到目前为止 我们已经在内部为几个配套应用程序开发了该 API 现在 我们正在考虑向外部开发人员开放 我们希望向 API 添加令牌 以帮助识别谁在发出请求 并总体上帮助管理其使用 此时 我
  • Jinja2 填充和对齐字符串

    我想实现类似的目标 https pyformat info string pad align https pyformat info string pad align 在 Jinja2 中 在 python 中 如果我希望字符串始终具有一定
  • 类型推断失败:没有足够的信息来推断参数请明确指定

    我正在尝试用 Kotlin 编写 Vaadin 应用程序 对于数据绑定 Vaadin 8 现在提供了类型安全数据绑定的可能性 在 Kotlin 中 我期望这样的工作 class LoginModel var username String
  • Formik 验证 isSubmitting / isValidating 未设置为 true

    我有一个用户要求的表格 我非常明显地表明该表格无效 所以我打算弹出一个sweetalert对话框让他们知道他们需要仔细检查表格 我想我可以在验证中这样做 以便在提交尝试失败时提醒他们 const validate values gt con
  • VBScript 中的 CRLF

    我是 VBScript 新手 我正在尝试编写一个函数来识别打印行中是否有 CRLF 你能帮我么 谢谢 你可以简单地使用result Instr yourString vbCRLF 如果 CRLF 字符序列存在于中 它将返回大于 0 的索引y
  • 如何在javascript中为隐藏变量分配空值?

    我有一个名为 str 的隐藏输入变量 我正在为其分配 abc 值 然后我尝试分配空值 或者说对它的空引用 但我不能 Edit 代码的一部分 隐藏领域
  • 为什么哈希的字符串键被冻结?

    根据规格 http www ruby doc org core 1 9 3 Hash html method i store 用作哈希键的字符串被复制并冻结 其他可变对象似乎没有这样特殊的考虑 例如 使用数组键 可以进行以下操作 a 0 h
  • 开玩笑,在 GitLab 上找不到命令

    我想在 GITLAB 上使用 JEST 执行单元测试 但它似乎不起作用 它可以在我的本地计算机上运行 但不能在 GitLab 上运行 整个代码为 gitlab ci yml image node 16 cache paths node mo
  • exec sp_updatestats 的作用是什么?

    有什么用sp updatestats 我可以在生产环境中运行它以提高性能吗 sp updatestats更新数据库中所有表的所有统计信息 甚至单行已更改 它使用默认示例来执行此操作 这意味着它不会扫描表中的所有行 因此它可能会生成不如替代方
  • 如何从两个制表符分隔的文件中获取枢轴线?

    给定两个文件file1 txt abc def t 123 456 jkl mno t 987 654 foo bar t 789 123 bar bar t 432 and file2 txt foo bar t hello world
  • 更新具有空值的多行

    我有一个包含 id 和 name 两列的表 Id 包含空值 name 包含一些名称值 表中存在重复的行 要求是将空值 id 更新为与名称值匹配的某个值 查找下表 Id Name 1 abc 1 abc 1 abc 1 abc NULL ab
  • 将表重新添加到实体模型 (edmx) 时不显示

    我有一个有 5 个表的数据库 一开始 我添加了这些表 但后来由于某些关系编译错误而决定删除一些表 现在 当我想将它们添加回来时 我打开 edmx 文件 gt 从数据库更新模型 我在 添加 选项卡下看不到这些表 而只在 刷新 选项卡下看到 我
  • Tensorflow:张量到 numpy 数组的转换,无需运行任何会话

    我在张量流中创建了一个OP 对于某些处理 我需要将数据从张量对象转换为numpy数组 我知道我们可以使用tf eval or sess run评估任何张量对象 我真正想知道的是 有没有办法在不运行任何会话的情况下将张量转换为数组 因此我们又
  • 映射类型:删除私有接口

    在 TypeScript 中 私有属性被视为类型的形状 或接口 的一部分 class Person constructor private name string public age number const p Person age 4
  • Android Studio:在当前行显示错误的键盘快捷键?

    我发现显示带下划线的代码段错误的唯一方法是将鼠标悬停在其上 实现此目的的键盘快捷键是什么 当光标位于错误行时 在 Mac 上是 Command F1 在菜单栏中是 查看 gt 错误描述 我认为这就是 Windows 上的 Control F
  • APNS 从多个服务器发送通知

    我正在编写一个 iOS 应用程序 它将通过 APNS 从后端服务器发送通知 我可以配置多个服务器来连接到 APNS 并发送通知吗 如果是这样 可以为单个应用程序发送通知的服务器数量是否有限制 我在 Apple 网站上找不到有关此内容的任何详
  • Spring框架,启用PUT方法

    我在捕获发送到服务器的 PUT 请求时遇到问题 这些是我的方法 RequestMapping method RequestMethod GET public String getCity PathVariable value cid Str
  • Webpack 开发服务器不自动重新加载

    所以我设置了 webpack 并webpack dev server but webpack dev server不自动重新加载 如果我修改文件并保存它 则浏览器中不会发生任何更改 直到我手动刷新 这是我的 webpack 配置和运行的脚本