标签: hot-module-replacement

受影响的包裹

HMR + 常春藤

这是回归吗？

常春藤之前，它有效

描述

好像 IVY 和 HMR 不能很好地一起玩？但是我已经看到他们的票已经关闭了，所以我想这应该是可能的。我在代码更改后重新加载：

未处理的承诺拒绝：类型 AppComponent 是 2 个模块声明的一部分：AppModule 和 AppModule！请考虑将 AppComponent 移至导入 AppModule 和 AppModule 的更高模块。您还可以创建一个新的 NgModule 来导出并包含 AppComponent，然后在 AppModule 和 AppModule 中导入该 NgModule。Type Background 是 2 个模块声明的一部分：AppModule 和 AppModule！请考虑将 Background 移至导入 AppModule 和 AppModule 的更高模块。您还可以创建一个新的 NgModule 来导出并包含 Background，然后在 AppModule 和 AppModule 中导入该 NgModule。

...

我们可以看到其他人如何更好地进行调查：https : //www.gitmemory.com/issue/storybookjs/storybook/8494/551763214

当前环境

角度版本：

ng 9.0.1

cli 9.0.1

我正在通过热模块重新加载 - 开发服务器获得CORS问题.我在端口上使用dev-server 3000但是应用程序是从另一个端口提供的http://localhost:52024/.

这是我得到的错误(Chrome,Windows 10):

GET http://localhost:3000//sockjs-node/info?t=1502216500095 404 (Not Found)
XMLHttpRequest cannot load http://localhost:3000//sockjs-node/info?t=1502216500095. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:52024' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
[WDS] Disconnected!

实际上我遇到两个错误:第一个是由//路径中的双斜线引起的,另一个是与CORS相关的错误.这是我的webpack.config.js:

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

module.exports = {
    entry: …

HMR（热模块更换）是一项出色的功能，如果不存在“路由解析”（请参阅​​下文），该功能将正常运行。

如果我resolve在这里删除：

  {
    path: 'new',
    component: BookNewComponent,
    data: {
      breadcrumb: 'book.new.breadcrumb'
    },
    resolve: {
      staticData: StaticDataResolve
    }
  },

HMR重新工作。如果resolve存在-> HMR将重新加载整个应用程序，而不是特定组件。

我怎么解决这个问题？

我似乎无法让源映射与mini-css-extract-plugin. 我让他们与style-loader.

devtool: argv.mode === 'development' ? 'eval' : 'none',

[...]

test: /\.scss$|\.css$/i,
use: [
     {
          loader: MiniCssExtractPlugin.loader,
          options: {sourceMap: argv.mode === 'development', hmr: argv.hot},
     },
     {
         loader: 'css-loader',
         options: {sourceMap: argv.mode === 'development', importLoaders: 1},
     },

[...]

plugins: [
    [...]
    new MiniCssExtractPlugin({
        filename: argv.mode === 'development' ? '[name].css' : '[contenthash].css',
        chunkFilename: argv.mode === 'development' ? '[id].css' : '[contenthash].css',
    }),
]

一些前沿信息：我一直使用style-loader来获取热模块替换以在开发模式和mini-css-extract-plugin生产模式下工作。

现在mini-css-extract-plugin支持 hmr，这很棒，因为我不再需要在开发中处理 FOUC。

但是没有源映射至少告诉我样式来自哪个文件很烦人。

通过以下配置，我已经能够使用 HotModuleReplacementPlugin() 进行热模块替换，但在运行 webpack-dev-server 时不能使用 --hot 。我的问题是，为什么？

几乎所有最近设置热模块替换的指南都使用 --hot，但它对我不起作用。

var webpack = require("webpack");\r\nvar path = require("path");\r\n \r\nconst config = {\r\n  entry: path.resolve(__dirname, \'app/index.js\') ,\r\n  output: {\r\n    path: path.resolve(__dirname, \'output\'),\r\n    filename: \'bundle.js\',\r\n    publicPath: "static/"\r\n  },\r\n  module: {\r\n    rules: [\r\n      {test: /\\.(js|jsx)$/, use: \'babel-loader\'}\r\n    ]\r\n  },\r\n  plugins: [\r\n    new webpack.HotModuleReplacementPlugin()\r\n  ]\r\n\r\n};\r\n \r\nmodule.exports = config;

\n\n

我像这样引用我的代码文件。

<script src="static/bundle.js"></script>\n

我像这样运行我的服务器。

webpack-dev-server --inline --colors --progress\n

版本。

webpack-dev-server 2.3.0\nwebpack 2.2.1\n

通过此设置，热模块加载可以正常工作。如果我删除插件，并运行附加 --hot …

我们正在使用升级适配器来设置Angular 1/2 Hybrid应用程序.我们像这样引导应用程序(如Angular docs https://angular.io/guide/upgrade中所述):

class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['ngApp'], { strictDi: true });
  }
}

对于我们的HMR设置,我们使用Angular CLI并遵循这些说明https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/configure-hmr.md

问题是当HMR运行并再次尝试运行该引导代码时,它会尝试重新引导Angular 1应用程序,这会导致Angular 1模块已经被引导的错误.

如果角度1尚未被引导,则尝试仅有条件地运行该代码也将不起作用,因为虽然组件刷新,但它不会使用新更新重新加载.

我们已经使用了似乎有用的东西,但是不太理想,它正在移除角度1应用程序元素,并重新创建它,以便引导程序不会出错.

像这样的东西:

ngDoBootstrap() {
    // reinitialize angular 1 app
    var element = document.getElementById('ng-app');
    let windowRef = <any>window;

    if(!windowRef.appContents) {
        windowRef.appContents = element.innerHTML;
    } else {
        document.body.removeChild(element);
        element = document.createElement('div');
        element.id = 'ng-app';
        element.innerHTML = windowRef.appContents;
        document.body.appendChild(element);
    }
    this.upgrade.bootstrap(element, ['ngApp'], { strictDi: true });
}

虽然有点hacky,至少似乎让HMR工作.但是,因为它导致整个angular 1应用程序重新启动,而不是仅刷新更改的模块,这只比简单的livereload快一点.

有没有更好的方法重新启动混合应用程序以允许HMR工作？

我正在使用 Yarn Workspaces 来管理单一存储库。我正在使用 webpack 4 进行热模块重新加载。在我的 Mono 存储库中，我有一个应用程序、一个 UI 组件库和另一个用于授权用户的组件库（auth 包）。我在应用程序和 auth 包中都使用了组件库。应用程序本地的所有内容都可以热重载，但 UI 组件库不会热重载 - 它需要完全刷新。

我尝试使用 接受 UI 组件库module.hot.accept(...)，但似乎没有接受。

猜测这个问题有点牵强，但有什么想法吗？

我在现有项目上设置了vue + vue-loader + HMR.

它工作得很好,vue组件被加载并正确呈现.

热模块重装部分已配置并加载.

但是,当更改仅是组件的文本节点时,它似乎不应用更新.

例如,如果我有这样的组件:

<template lang="html">
  <div>
    <h1>I'm a Component</h1>
  </div>
</template>

<script>
export default {
}
</script>

我把它改成了这个:

<template lang="html">
  <div>
    <h1>I'm a Component updated</h1>
  </div>
</template>

<script>
export default {
}
</script>

然后我可以在浏览器控制台中看到HMR更新.

但该组件没有更新,它仍然说"我是一个组件".

但是,如果我稍微改变组件的html结构,如下所示:

<template lang="html">
  <div>
    <h1>I'm a Component updated</h1>
    <p>do it</p>
  </div>
</template>

<script>
export default {
}
</script>

然后控制台显示HMR日志,但这次是组件更新.

行为始终相同,文本更改=无更新.

加载器在其配置中没有任何特殊内容.

{
test: /\.vue$/,
loader: 'vue-loader',
options: {
    loaders: {
    }

}

使用此任务通过gulp启动开发服务器:

// Start a webpack-dev-server
const hot_webpack_config …

我已经添加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/ …

我有一个 React monorepo（用 TypeScript 构建），最近我从 Webpack 切换到了 Vite。然而，我很难让 HMR 在 Vite 中正常工作（我相信是因为我们单独构建了我们的包）。

我对实现此功能的选项持开放态度（尽管我认为我仍然需要能够构建我的包，以实现 Jest/ESLint 性能）。

项目结构

\apps
  \main
\packages
  \domainA
    \foo
      \package.json
      \build
      \src

目前，每个包都使用 tsc 构建"tsc --project tsconfig.lib.json"到build目录中。定义package.json如下：

"name": "@ig/foo",
"main": "./build/index.js",
"types": "./build/index.d.ts",
"files": [
    "/build"
],

我可以启动主应用程序，如果我进行更改，/packages/domainA/foo/src/index.ts它将构建（当前使用观察程序）并且我会重新加载整个页面。

我想消除页面重新加载并使用 HMR。不幸的是，由于其他工具的速度缓慢，我认为将入口点更改为"main": "./src/index.ts"不适用于我的用例。不过，我很乐意尝试绕过此问题，并在必要时将 Vite 重新指向源文件。

我已经尝试了各种排列，查看了一些示例存储库。但没有设法让任何东西发挥作用，例如

resolve: {
  alias: [{
    find: '@ig/foo',
    replacement: '../packages/domainA/foo/src/index.ts',
  },
}

这是我当前的 Vite 配置：

import react from '@vitejs/plugin-react';
import fs from 'fs';
import path, { …