标签: hot-module-replacement

(即使使用Angular 7也确认了问题).让我们解决这个问题!

我正在使用HMR设置:https://github.com/angular/angular-cli/wiki/stories-configure-hmr from a ng newbuild build.

如果我更改任何组件并使其延迟加载,角度HMR将热重新加载所有内容,使页面同步更慢.

我知道这是因为它默认设置为console.log每个正在重新加载的模块,当我使用惰性路由时,它会记录所有内容.但是当我将该组件更改为非延迟加载时,它只记录一些小组件.

因此,当我使用HMR和懒惰路由时,我的应用程序需要几秒钟才能刷新.这很烦人.

有没有办法解决？

(懒惰的加载路线是通过这样的方式完成的)

// Main homepage
{
  path: '',
  loadChildren: './public/home/home.module#HomeModule'
},
// ...

(只是一个例子,表明我正在以正确的方式加载)

这里有一些日志记录显示我懒惰加载时会发生什么 home.component.ts

// Everything here is normal, great!
[HMR]  - ../../../../../src/app/public/home/home.component.html
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.component.ts
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.module.ts
log.js:23 [HMR]  - ../../../../../src/app/public/home/home.routing.ts
// Everything below here is NOT normal, bad!  All this is extra.  These are my modules, yes, but all this needs to be loaded again?
log.js:23 …

我创建了一个新的角度项目并设置了HMR,如下所述:https: //github.com/angular/angular-cli/wiki/stories-configure-hmr

该项目包含主要组件(父级),它包含router-outlet3个延迟加载的子组件并链接到该组件.

注意:我也使用自定义,RouteReuseStrategy但就我测试而言,它对HMR没有影响.

无论我正在更改什么文件 - .html或.ts(父/子),整个应用程序都会重新加载.

我已经设置了一个基本的回购,可以在这里找到:https: //github.com/ronfogel/demo-hmr

我已经看过很多关于实时重新加载,热重新加载和热模块替换的帖子和出版物,指的是在Web客户端/ FE层工作时,在浏览器中立即反映代码变化的不同实践.

我对这些术语的含义有一个公平的理解,我唯一的问题是这些概念是否在某个地方得到了适当的定义,以及它们之间的具体差异.

我有一个简单的配置,webpack-dev-middleware并webpack-hot-middleware使用热重载(HMR)与反应.

一切都工作正常,除了我对代码所做的每一次更改都需要2到3-4秒!直到我在浏览器中看到它.难道我做错了什么 ？它应该是这样的？

我的代码相当大,我的捆绑缩小到841kb(200kb gzip)这是原因吗？代码库越大,捆绑创建速度越慢？

Express Server:

var webpack = require('webpack');
var webpackConfig = require('./webpack.hot.config');
var compiler = webpack(webpackConfig);

app.use(require("webpack-dev-middleware")(compiler, {
  noInfo: true,
  publicPath: webpackConfig.output.publicPath,
  watchOptions: {
    poll: true
  }
 }));
app.use(require("webpack-hot-middleware")(compiler, {
  log: console.log,
  path: '/__webpack_hmr',
  heartbeat: 10 * 1000
 }));

webpack.hot.config.js

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

module.exports = {

context: __dirname,
entry: [
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
    './src/js/index'
],
module: {
    loaders: [{
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src/js'),
        //exclude: /node_modules/,
        loader: 'react-hot!babel'
    },
        { …

我正在运行一个快速服务器,它将充当我的React应用程序的API,该应用程序由webpack-dev-server捆绑并提供服务.

我正在尝试让热模块替换工作,并且几乎在那里,当我对我的文件进行更改时,我在控制台中得到了这个:

但除非手动刷新,否则永远不会重新渲染应用程序.不知道这是否相关,但是当我更新我的.scss文件时,它会刷新而不会手动这样做,并且更新如我所料.

版本:

"webpack": "2.1.0-beta.22"

"webpack-dev-server": "2.1.0-beta.8"

"react-hot-loader": "3.0.0-beta.5"

我尝试了最新的webpack,但它给了我无法克服的验证错误.

我通过:运行webpack "webpack": "webpack-dev-server --port 4000 --env.dev",我的快速服务器正在运行http://localhost:3000.

这是我的webpack.config.babel.js:

const webpack = require('webpack');
const { resolve, join } = require('path');
const { getIfUtils, removeEmpty } = require('webpack-config-utils')

const getEntry = (ifDev) => {
  let entry

  if (ifDev) {
    entry = {
      app: [
        'react-hot-loader/patch',
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:4000/',
        './js/index.js'
      ],
      vendor: ['react']
    }
  } else {
    entry = {
      bundle: './js/index.js',
      vendor: ['react']
    }
  }

  return …

版本

"extract-text-webpack-plugin":"^ 2.0.0-rc.2",

"webpack":"^ 2.2.0",

"webpack-dev-server":"^ 2.2.1"

问题

"extract-text-webpack-plugin":"^ 1.0.1",

"webpack":"^ 1.14.0",

"webpack-dev-server":"^ 1.16.2"

自从升级到版本2后不再能够HMR css/scss,更改样式会触发更改(请参阅下面的输出示例),但是我必须手动刷新页面以查看页面不会自动刷新的更改,如果我创建了更改scss文件后更改为js文件然后更改将反映为js更改触发HMR,其中还包括样式更改,但只更改样式而不更改js需要手动页面刷新.

任何想法,如果我配置了错误或我需要做什么让css/scss HMR工作？

我也在这里发布了这个问题:https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384但不确定它是否是webpack-dev-server问题或者是extract-text-webpack -plugin问题或者只是我做过的事情.

命令运行:

npm run dev

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

升级前配置:

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

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');

let generateHtml = new HtmlWebpackPlugin({ title: 'My App' });
let extractCSS = new ExtractTextPlugin('styles/[name].css', { allChunks: true }); …

我有以下功能的文件@/lang/index.js：

async function fetchMessages(locale) {
  const module = await import(/*
    webpackChunkName: "lang/[request]",
    webpackExclude: /index/
  */ `@/lang/${locale}`)

  return module.default
}

我想热重载此功能导入的模块。我尝试了几种不同的方法，module.hot.accept()但没有成功。

这是我无法正常运行的同一文件末尾的热重装代码：

if (process.env.NODE_ENV !== "production" && module.hot) {
  module.hot.accept(["./en-US"], () => {
    const { locale } = i18n
    fetchMessages(locale).then((strings) => {
      i18n.setLocaleMessage(locale, strings)
    })
  })
}

有什么想法吗？当检测到更改时，我想热重载我的语言文件。

谢谢！

我跟着这个github故事:https://github.com/angular/angular-cli/wiki/stories-configure-hmr

我可以在自动刷新后查看更改ng serve(环境是开发),但是ng serve --hmr -e=hmr,页面会自动刷新(如闪烁)而不进行更改.我必须按下F5才能看到变化.

HMR工作正常,因为我看到我的终端输出如下:

NOTICE Hot Module Replacement (HMR) is enabled for the dev server.
  The project will still live reload when HMR is enabled,
  but to take advantage of HMR additional application code is required
  (not included in an Angular CLI project by default).
  See https://webpack.github.io/docs/hot-module-replacement.html
  for information on working with HMR for Webpack.
To disable this warning use "ng set --global warnings.hmrWarning=false"
** NG Live Development …

我希望将 HMR 添加到纯 Node.js 代码或使用原生 ES 模块编写的浏览器代码中。

没有 Babel，没有 Webpack，没有转译，只有普通的 JS 文件和 ES 模块import和export调用。

我们可以在普通的 Node 或浏览器中做 HMR 吗？

受影响的包裹

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