Vue

  • https://vue-loader-v14.vuejs.org/zh-cn/features/hot-reload.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    状态保留规则
    当编辑一个组件的 <template> 时，这个组件实例将就地重新渲染，并保留当前所有的私有状态。能够做到这一点是因为模板被编译成了新的无副作用的渲染函数。

    当编辑一个组件的 <script> 时，这个组件实例将就地销毁并重新创建。(应用中其它组件的状态将会被保留) 是因为 <script> 可能包含带有副作用的生命周期钩子，所以将重新渲染替换为重新加载是必须的，这样做可以确保组件行为的一致性。这也意味着，如果你的组件带有全局副作用，则整个页面将会被重新加载。

    <style> 会通过 vue-style-loader 自行热重载，所以它不会影响应用的状态。

    用法
    当使用脚手架工具 vue-cli 时，热重载是开箱即用的。

    当手动设置你的工程时，热重载会在你启动 webpack-dev-server --hot 服务时自动开启。

    高阶用户可能希望移步 vue-loader 内部使用的 vue-hot-reload-api 继续查阅。
    - https://github.com/vuejs/vue-hot-reload-api/blob/master/src/index.js

    关闭热重载
    热重载默认是开启的，除非遇到以下情况：

    webpack 的 target 的值是 node (服务端渲染)
    webpack 会压缩代码
    process.env.NODE_ENV === 'production'
    你可以设置 hotReload: false 选项来显式关闭热重载：

    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            hotReload: false // 关闭热重载
          }
        }
      ]
    }

    webpack-dev-server

  • https://webpack.js.org/concepts/hot-module-replacement/#root

  • https://webpack.docschina.org/concepts/hot-module-replacement/

  • https://webpack.docschina.org/guides/hot-module-replacement/

    1
    2
    3
    4
    5
    6
    模块热替换(hot module replacement)
    这一切是如何运行的？How It Works
    在应用程序中In the Application
    在 compiler 中In the Compiler
    在模块中In a Module
    在 runtime 中In the Runtime
    1
    2
    3
    4
    5
    6
    从 webpack-dev-server v4.0.0 开始，热模块替换是默认开启的。

    devServer: {
          static: './dist',
         hot: true,
        },
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    vue-cli-service serve
    用法：vue-cli-service serve [options] [entry]

    选项：

      --open    在服务器启动时打开浏览器
      --copy    在服务器启动时将 URL 复制到剪切版
      --mode    指定环境模式 (默认值：development)
      --host    指定 host (默认值：0.0.0.0)
      --port    指定 port (默认值：8080)
      --https   使用 https (默认值：false)
    vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
    除了通过命令行参数，你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器。
    命令行参数 [entry] 将被指定为唯一入口，而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。
    const server = new WebpackDevServer(Object.assign({
          historyApiFallback: {
            disableDotRule: true,
            htmlAcceptHeaders: [
              'text/html',
              'application/xhtml+xml'
            ],
            rewrites: genHistoryApiFallbackRewrites(options.publicPath, options.pages)
          },
          hot: !isProduction
        },

  • https://webpack.docschina.org/guides/hot-module-replacement/#other-code-and-frameworks

    hot reload - flutter