react.js - 为什么使用webpack-dev-server会刷新整个页面而不是局部刷新

问题描述

问 题

webpack.config.js代码

/**
 * Created by daijiaru on 2016/10/26.
 */
var path = require('path');
var webpack = require('webpack');
module.exports = {
    devtool: 'eval-source-map',
    entry: {
        news: "./app/news.js"
    },
    output: {
        path: path.resolve(__dirname, './build'),
        filename: '[name].js',
        publicPath: '/assets/'
    },
    module: {
        loaders: [
            {
                test: /\.js(x)?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }

            },
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            }, {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
    plugins: [
    ]
};

package.json

"script":{
      "dev": "webpack-dev-server --port 9090 --content-base=build --hot --inline --watch"
    },
  "dependencies": {
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.1"
  }
    

理论上不是应该改变js或css代码不是应该只会局部刷新吗，为什么我这里改变代码的时候会刷新整个页面

解决方案

Webpack 开发服务器在代码调整后支持两种模式

1. 自动刷整个页面

添加 --Inline

1. 动态替换模块

添加 --inline --hot

在你的代码入口模块里添加

if (module.hot) { module.hot.accept(); }

这段代码用于标志哪个模块接收热加载，如果是代码入口模块的话，就是入口模块接收。

按问题配置来看，服务器端是开启了热加载功能。但是，不知道有没有添加上面提到的那段接收热加载代码。

Webpack 会从修改模块开始根据依赖关系往入口方向查找热加载接收代码。如果没有找到的话，默认是会刷新整个页面的。如果找到的话，会替换那个修改模块的代码为修改后的代码，并且从修改模块到接收热加载之间的模块的相关依赖模块都会重新执行返回新模块值，替换点模块缓存。

由于 Webpack 的热加载会重新执行模块，如果是使用 React，并且模块热加载写在入口模块里，那么代码调整后就会重新执行 render。但由于组件模块重新执行返回了新的组件，这时前面挂在的组件状态就不能保留了，效果就等于刷新页面。

需要保留组件状态的话，需要使用 react-hot-loader 来处理。

下面是自己整理的一些 webpack 使用笔记，需要的话，可以参考一二

• Webpack 开发服务器

• Webpack 热加载

• React 项目模板：支持 React 实现的页面局部刷新，使用到的技术点的较多，解决了许多 Webpack 使用问题，可以参考学习

这篇关于react.js - 为什么使用webpack-dev-server会刷新整个页面而不是局部刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！