10天掌握webpack 4.0 优化篇 (6)热更新
我们可以配置 热更新 当我们修改代码的时候 会同步更新输出
配置:
在 devServer 配置 hot 为 true
devServer: { contentBase: path.resolve(__dirname, 'dist'), host: 'localhost', compress: true, port: 8080, hot: true },
配置热更新插件
new webpack.HotModuleReplacementPlugin(), //热更新插件 new webpack.NamedModulesPlugin() // 打印更新的模板路径
测试:
index.js
import str from './source' console.log(str); if (module.hot) { module.hot.accept("./source.js", () => { let str = require('./source') console.log(str); }) }
我们在index.js 中 引用了 source.js 当 source.js 更新了代码 index.js 会同步更新
export default 'zxw1'
查看控制台输出:
越努力越幸运