html-webpack-plugin

来源:3-2 自动化生成项目中的html页面(中)

慕仙1767075

2018-08-03 17:38

使用了html-webpack-plugin之后怎么使用DevServer实时刷新啊???

写回答 关注

1回答

  • 慕前端3377544
    2018-09-16 17:58:28

    启用 HMR:模块热替换(Hot Module Replacement 或 HMR)它允许在运行时更新各种模块,而无需进行完全刷新。

    第一步:修改webpack-dev-server 的配置 或者通过命令来修改webpack-dev-server --hotOnly

      devServer: {
          hot: true
        },

    第二步:引入插件: html-webpack-plugin、clean-webpack-plugin(每次都重新清除一次dist(目标)文件目录); 引入webpack

      const HtmlWebpackPlugin = require('html-webpack-plugin');
      const CleanWebpackPlugin = require('clean-webpack-plugin');
      const webpack = require('webpack');

    第三步:使用webpack内置插件HMR

      plugins: [
               new CleanWebpackPlugin(['dist']),
             new HtmlWebpackPlugin({
                title: 'Hot Module Replacement'
             }),
                new webpack.HotModuleReplacementPlugin()
        ],


webpack深入与实战

webpack实战教程,用真实项目带你探索 webpack 强大的功能

86561 学习 · 721 问题

查看课程

相似问题