为什么 webpack-dev-server 中需要内联和热标志来启用热重载

Question

在 every documentation 或文章中我看到要使用 webpack-dev-server 启用 HMR 我们需要使用 webpack-dev-server --hot --inline，有趣的是即使我省略了 hot 标志并且只保留 inline 在我的代码库 HMR 中仍然有效。是所有文件都旧了还是我做错了？

我没有在我的 webpack 配置中定义任何 devServer 选项，这是我的 web-pack 配置

module.exports = {
    entry: {
     main: "./app/main.ts",
     shims: ['es6-shim', 'reflect-metadata', 'rxjs', 'zone.js']
    },
    output: {
        path: __dirname,
        filename: "./dist/[name].js",
        sourceMapFilename: "./dist/[name].map"
    },
    resolve: {
        extensions: ['', '.js', '.ts']
    },
    module: {
        loaders: [
            { test: /\.ts?$/, loader: 'ts-loader' }
        ]
    },
    devtool: "#source-map"
};

这是我的 package.json 脚本

 "scripts": {
    "start": "webpack && webpack-dev-server --inline --port 9876",
    "typings": "typings",
    "postinstall": "typings install"
  },

这是entire code

Answer 1

如果您在没有 --hot 的情况下使用它，它将强制完全刷新（无 HMR）

例如，样式加载器实现了 HMR 接口，并且能够在不强制完全刷新的情况下修补样式更改。

为什么 webpack-dev-server 中需要内联和热标志来启用热重载

Why both inline and hot flag required in webpack-dev-server to enable hot reloading

webpack

webpack-dev-server

webpack-hmr