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

Question

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代码不是应该只会局部刷新吗，为什么我这里改变代码的时候会刷新整个页面

Answer 1

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 使用问题，可以参考学习

Answer 2

的确会刷新整个页面。
提示：
js 文件修改 或者css 修改，webpack 会根据你修改的代码局部打包,而不是全量打包，这样可以保证编译的速度快。

Answer 3

想要实现局部热更新，可以参考：webpack热更新

用到这个2个插件：webpack-dev-middleware和webpack-hot-middleware

webpack-dev-server是页面自动刷新，相当于每次修改代码都要重新加载一次。