标签: webpack-dev-server

我已经添加react-rails到我们正在慢慢迁移以做出反应的现有项目中。

当前的 webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .tsx
    - .ts

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/ …

我安装了带有 PWA 插件和 i18n 的 Vue CLI 3。

我删除了 /public/ 中的所有 Vue 图标文件（包括 /public/img/icons 中的 PNG），删除了 /src/assets 中的 logo.png 文件，删除了 /public/index 中的 link(rel=icon) 标签.html，更改 manifest.json 以删除对现有 Vue 图标文件的任何引用，清除浏览器缓存，但在加载页面时，我仍然在我的 DOM 中获取这些硬编码链接标签：

<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#4DBA87">
<meta name="msapplication-TileImage" content="/img/icons/msapplication-icon-144x144.png">

这些文件都不存在，也没有在我的项目中的任何地方引用。最奇怪的是，即使删除了所有文件，默认的 Vue 图标仍然显示在我使用的任何浏览器中，所以它绝对不是客户端缓存的东西。

我怎样才能删除这些？

我有一个项目已经完美运行了几个月，可以npm run serve毫无问题地运行。每当我切换网络时，我都必须终止并再次运行命令，但这从来都不是问题，服务器总是可以重新启动。

直到现在 - 无论我做什么，我都无法启动服务器。我收到此错误：

npm run serve

> xbs@0.6.2 serve D:\workspace\[PROJECT]
> vue-cli-service serve

 INFO  Starting development server...
 10% building 1/1 modules 0 active ERROR  TypeError: Cannot read property 'upgrade' of undefined
TypeError: Cannot read property 'upgrade' of undefined
    at Server.<anonymous> (D:\workspace\[PROJECT]\node_modules\webpack-dev-server\lib\Server.js:667:47)
    at Array.forEach (<anonymous>)
    at new Server (D:\workspace\[PROJECT]\node_modules\webpack-dev-server\lib\Server.js:666:22)
    at serve (D:\workspace\[PROJECT]\node_modules\@vue\cli-service\lib\commands\serve.js:137:20)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

我最后一次收到这条消息是在我忘记设置.env文件时，但这是一个以前的工作副本，其中设置了所有必需的文件，自上次工作运行以来没有任何更改。

我什至尝试过提取 repo 的新副本，运行npm i并设置所有 …

基本上我正在设置 webpack，当我尝试在 webpack 中以开发模式获取 dev-server 时，我遇到了这个错误。

我尝试遵循其他方面的一些说明，从头开始尝试了两次，但仍然遇到相同的错误。我无法弄清楚我在这里做错了什么。如果有人对此问题有解决方案，我将非常感激。谢谢。

我得到的错误：

bundle.js:20 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (bundle.js:20)
    at eval (index.js:2)
    at Object../src/js/index.js (bundle.js:357)
    at __webpack_require__ (bundle.js:20)
    at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:2:18)
    at Object.0 (bundle.js:368)
    at __webpack_require__ (bundle.js:20)
    at bundle.js:69
    at bundle.js:72

具体错误：

// Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

webpack.config.js：

const path = require('path');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    }
};

包.json：

{
    "name": …

在阅读webpack 文档后，我无法理解 hot:only 与 hot:true 之间的区别

要在构建失败时启用热模块替换而不刷新页面作为后备，请使用 hot: 'only'

如果我们使用 webpack-dev-server，监视模式会自动启用。那么什么情况下会发生构建失败呢？

我知道 HMR 在幕后如何工作（HMR 服务器、HMR 运行时），但不知道上面两者之间有什么区别。

有人可以解释一下吗？谢谢。

Webpack 开发服务器无法将 watchContentBase 识别为有效选项。已watchContentBase弃用吗？如果是这样，有什么替代方案？以下是我的 Webpack 开发服务器的配置：

devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 8080,
    open: true,
    hot: true,
    watchContentBase: true,
}

当我运行我的服务器时，出现以下错误。

选项对象无效。开发服务器已使用与 API 架构不匹配的选项对象进行初始化。

• options 有一个未知属性“watchContentBase”。这些属性有效： object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, HistoryApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware ？，onBeforeSetupMiddleware？，onListening？，打开？，端口？，代理？，服务器？，setupExitSignals？，静态？，watchFiles？，webSocketServer？}