标签: webpack-hmr

(即使使用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 …

我已经看到了一些边界案例和奇怪的开发人员界面.

来自"摇动你的设备",这是非常不切实际的,特别是平板电脑

要解决Android工作室模拟按钮按下.

是否有一致的方法来做到这一点？我们不能使用实习API在我们的应用程序中启用调试按钮来启动这样的菜单navigator.popUpDevMenu()吗？

如果没有,你如何摇动平板电脑才能让它运转起来.这是为了解决如何在真实设备上配置HMR.React native确实改善了开发体验,但我会说特别的东西会减慢它的速度.

我想启用的WebPack HMR中的NodeJS写在项目打字稿.

但是module.hot不可用:

• @ types/webpack-env定义:

  declare var module: __WebpackModuleApi.Module
  

  Run Code Online (Sandbox Code Playgroud)

• 哪个与@ types/node定义冲突:

  declare var module: NodeModule
  

  Run Code Online (Sandbox Code Playgroud)

删除@ types/node,解决了问题,但禁用了process:

process.env.NODE_ENV === 'production' // [ts] Cannot find name 'process'

我正在研究React&Redux项目.该项目过去常常使用webpack-dev-middleware和热中间件进行热重装.

在我将Redux Saga添加到项目中之后,将一些saga中间件添加到redux商店.似乎每当我更改传奇代码时,热重新加载都会破坏并显示错误消息:

提供商>不支持动态更改store.您很可能会看到此错误,因为您已更新到Redux 2.x和React Redux 2.x,它们不再自动热重新加载Reducer.有关迁移说明,请参阅https://github.com/reactjs/react-redux/releases/tag/v2.0.0.

我知道佐贺使用发电机并且它是时间依赖的.可以用Sagas热重新加载页面吗？就像Redux减速器在热重装过程中如何替换自身一样.

谢谢!

我正在尝试创建我的React项目的生成版本,但它选择了错误的配置.

在开发版本中,我正在使用HMR(热模块替换).这是在.babelrc中配置的env > development > plugins.添加额外节点时env > production,似乎会被忽略.它仍在使用HMR的开发配置,这会导致错误:

未捕获错误:locals [0]似乎不是module启用了热模块替换API 的对象.您应该使用envBabel配置中的部分禁用生产中的react-transform-hmr .请参阅自述文件中的示例:https://github.com/gaearon/react-transform-hmr

当然我已经检查了这些信息,但一切似乎都是正确的.当我从.babelrc的开发配置中删除HMR插件时,它可以工作,证明它确实使用开发配置而不是生产.这是我的文件:

的package.json

{
  "name": "myproject",
  "main": "index.js",
  "scripts": {
    "serve": "cross-env NODE_ENV=development webpack-dev-server --content-base bin/ --devtool eval --progress --colors --hot --inline",
    "deploy": "cross-env NODE_ENV=production BABEL_ENV=production webpack -p --config webpack.production.config.js"
  }
  //dependencies omitted in this example
}

.babelrc

{
    "presets": ["react", "es2015", "stage-0"],
    "plugins": [
        ["transform-decorators-legacy"]
    ],
    "env": {
        "development": {
            "plugins": [
                ["react-transform", {
                    "transforms": [{
                        "transform": …

我从Webpack收到以下错误:

Invalid HMR message 接下来是一串非常详细的JSON.

我找不到任何可以更好地调试此资源的资源.有小费吗？

奖金,如果有人能够让我洞察为什么require在整个应用程序使用它时没有找到没问题.

以下是一些细节:

• 运行节点/通告
• 使用Webpack

NPM依赖项:

  "dependencies": {
    "babel-core": "^6.7.2",
    "babel-polyfill": "^6.7.4",
    "body-parser": "~1.12.0",
    "cookie-parser": "~1.3.4",
    "css-modules-require-hook": "^4.0.0",
    "cuid": "^1.3.8",
    "debug": "~2.1.1",
    "express": "~4.12.2",
    "fs": "0.0.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "redux": "^3.3.1",
    "serve-favicon": "~2.2.0",
    "webpack": "^1.12.13"
  },
  "devDependencies": {
    "babel-eslint": "^5.0.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-register": "^6.7.2",
    "cross-env": "^1.0.7",
    "css-modules-require-hook": "^4.0.0",
    "eslint": "^2.6.0",
    "redux-devtools": "^3.1.1",
    "redux-devtools-dock-monitor": "^1.1.0",
    "redux-devtools-log-monitor": "^1.0.4",
    "webpack-dev-middleware": "^1.5.1", …

我正在为客户开发一个项目,我需要使用webpack的热模块替换功能.我正在使用NGINX背后的快速(节点)应用程序.我正在使用许多javascript框架来设计应用程序,React恰好是其中之一.

我将使用HMR功能.

我有这样的webpack.config.js:

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var merge = require('webpack-merge');
var validate = require('webpack-validator');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var styleLintPlugin = require('stylelint-webpack-plugin');

//breaking up into smaller modules
//commons module
//first
var start = {        
 context : __dirname ,

 //entry point defination
 entry : { 
    app : ['./require.js','webpack-hot-middleware/client?https:127.0.0.1:8195'], 
    vendor : ['angular','angular-animate','angular-messages','angular-aria','angular-route','angular-material','react','react-dom',''webpack-hot-middleware/client?https:127.0.0.1:8195'']

 },
 //output defination
 output : {
    path : './public/dist',
  publicPath: 'https://127.0.0.1:8195/public/dist/',
    filename : 'app.bundle.js'
 },
 module: { preLoaders: [
      {
        test: /\.(js|jsx)$/,
         exclude: /(node_modules|bower_components)/,
        loaders: …

我试图建立一个阵营与项目react-css-modules,的WebPack和热模块的更换.一切都像魅力一样,但我不能让CSS源图工作.

我按照本指南制作了HMR.它涉及一个BrowserSync设置,用于在Webpack将其写入磁盘后更新css文件.

我使用(如react-css-modules建议)ExtractTextPlugin来提取所有的css:

{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
}

但是,如果我将其更改为源图,如此处所示

loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass-loader outputStyle=expanded&sourceMap=true&sourceMapContents=true')

我收到错误:"root" CSS module is undefined.在我的浏览器控制台中.

你可以在这里找到我的示例repo ,但这里是我用于开发的完整webpack配置.

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WriteFilePlugin = require('write-file-webpack-plugin').default;

module.exports = {
  entry: {
    bundle: [
      'webpack/hot/dev-server',
      'webpack-hot-middleware/client',
      './index.js'
    ]
  },
  devtool: 'cheap-module-source-map',
  debug: true,
  devServer: devServer,
  context: path.resolve(__dirname, './src'),
  output: {
    path: path.resolve(__dirname, './builds'),
    filename: '[name].js', …

我有一个简单的配置,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'
    },
        { …

在Angular中,有一种方法可以在模块热重新加载后保留应用程序状态吗？与VueJS中发生的情况类似:

到目前为止,我已经让HMR在几个教程之后工作了,但它所做的只是重新加载应用程序而不进行实际的页面刷新.快满了,是的.但仍然不是它可能的地方.

有没有人得到这个实际工作？

PS:它与https://github.com/beeman/tutorial-angular-cli-hmr/issues/4有关