webpack (九) -热更新——浏览器不刷新，更新打包后的结果

17-webpack-热更新——浏览器不刷新，更新打包后的结果

• 实现浏览器不刷新，更新打包后的结果，默认对js不生效，对样式生效。

https://www.webpackjs.com/guides/hot-module-replacement/#启用-hmr

第一步：webpack.config.js中配置文件服务器即可

+ const webpack = require('webpack');

  module.exports = {
    entry: {
-      app: './src/index.js',
-      print: './src/print.js'
+      app: './src/index.js'
    },
    devtool: 'inline-source-map',
    //服务器配置
    devServer: {
      contentBase: './dist',
+     hot: true    //2.开启热更新
    },
    //插件配置
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: '模块热替换'
      }),
+     new webpack.HotModuleReplacementPlugin()  //1.热更新模块配置
    ],

第三步：命令行运行代码，打包

npm run serve

打包成功后，打开网页

第四步：修改文件代码后，观看页面刷新按钮，验证热更新效果