logo标签列表

Webpack-dev-server编译文件但不刷新页面，也没有把编译后的JavaScript提供给浏览器

javascriptwebpackvue.jswebpack-dev-server
110

我正在尝试使用webpack-dev-server来编译文件并启动开发Web服务器。

在我的package.json中，我将脚本属性设置为：

"scripts": {
  "dev": "webpack-dev-server --hot --inline",
 }

所以，--hot 和 --inline 应该启用 Web 服务器和热更新（就我所了解的而言）。

在我的 webpack.config.js 文件中，我设置了入口、输出和 devServer 设置，并添加了一个加载器来查找 .vue 文件的变化：

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        publicPath: '/public',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    devServer:{
        contentBase: __dirname + '/public'
    },
    module:{
        loaders:[
            { test: /\.vue$/, loader: 'vue'}
        ]
    }
};

所以在这种设置下，我运行 npm run dev。webpack-dev-server启动了，模块加载器测试工作正常（即当我保存任何.vue文件时，它会导致webpack重新编译），但是：

  • 浏览器从未刷新过
  • 存储在内存中的编译javascript从未向浏览器公开

对于第二个问题，我可以看到这一点，因为在浏览器窗口中vue占位符从未被替换，如果我打开javascript控制台，则Vue实例从未创建或全局可用。

问题的Gif

我错过了什么？

我认为你的webpack没有正常工作，浏览器控制台中缺少bundle.js。之后，你应该仔细阅读热模块替换文档https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement，建议先从CLI模式开始。 - mygoare
6
我在制作过程中阅读了文档，但我个人认为解释有些复杂。另外，当我按照文档中的示例在新项目中进行尝试时，它并没有起作用。然而，我进行了一些组件隔离测试，并找出了配置文件中的问题。今天午餐时，我会打字写出详细的答案。 - Chris Schmitz
15个回答
0

我将在这里加入自己关于Webpack --watch的特殊故事，让它成为苦难之墙上的一部分。

我正在运行

webpack --watch

为了构建一个TypeScript项目。编译后的.js文件会更新，但浏览器看到的捆绑包不会更新。所以我基本上和OP处于同样的位置。
我的问题归结为watchOptions.ignored参数。构建配置的原始作者将ignored设置为过滤函数，结果证明这不是该参数的有效值。用适当的RegExp替换过滤函数，让--watch构建再次正常工作。
0

对我有帮助的是引入devServer.devMiddleware。例如，在webpack-dev-server 4.10.0中，属性contentBase不再可用。

devServer: {
 devMiddleware: {
  index: true,
  publicPath: './build/static/',
  serverSideRender: true,
  writeToDisk: true,
 }
},
0
我遇到了这样的情况，第一次保存更新正确，但随后的更改被忽略了。这个答案解决了我的问题。 - Neil Stenton
这不是期望的状态，重新编译将需要大量时间，特别是在大型代码库中。 - konsalex
@konsalex 很好的发现！ 我已将其添加为警告。 我之所以使用这种方法，是因为这里的其他解决方案都对我无效。 - laggingreflex
0
这是一个老问题，现在在webpack-cli v5中大多数配置选项都已经改名了。 然而对我有效的是{watchFiles}
  • options.watchFiles应该是以下之一：[非空字符串 | 对象 { paths?, options? }, ...] | 非空字符串 | 对象 { paths?, options? } -> 允许配置要监视文件更改的glob/目录/文件列表。 -> 详细信息请参阅https://webpack.js.org/configuration/dev-server/#devserverwatchfiles
    详情：
    • options.watchFiles应该是一个数组：[非空字符串 | 对象 { paths?, options? }, ...]
    • options.watchFiles应该是一个非空字符串。
    • options.watchFiles应该是一个对象：对象 { paths?, options? }
  devServer: {
    watchFiles: "./src/index.html",
    ...
  }
-1

您的项目树不够清晰，但问题可能出在contentBase设置上。尝试将contentBase设置为：__dirname

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接