webpack |
您所在的位置：网站首页 › xch在哪个交易所交易了 › webpack |
webpack
|
1.什么是HMR?
1.1通过webpack-dev-server自动打包并没有真正的放到指定的目录中 因为读写磁盘是非常耗时和消耗性能的, 所以为了提升性能webpack-dev-server将转换好的内容直接放到了内存中
1.2通过webpack-dev-server可以实现实时监听打包内容的变化, 每次打包之后都会自动刷新网页, 但是正是因为每当内容被修改时都会自动刷新网页 所以给我们带来了很多不便, 这时就需要通过HMR插件来优化调试开发
1.3HMR(HotModuleReplacementPlugin)热更新插件, 会在内容发生改变的时候时时的更新修改的内容但是不会重新刷新网站 2.HMR使用: HotModuleReplacementPlugin是一个内置插件, 所以不需要任何安装直接引入webpack模块即可使用 const Webpack=require('webpack');2.1在devServer中开启热更新 hot: true, // 开启热更新 hotOnly: true // 即使热更新不生效，浏览器也不自动刷新 devServer: { contentBase: "./bundle", open: true, port: 8888, hot: true, // 开启热更新 hotOnly: true // 即使热更新不生效，浏览器也不自动刷新 },
2.2在webpack.config.js中创建热更新插件 new Webpack.HotModuleReplacementPlugin() plugins: [ new Webpack.HotModuleReplacementPlugin() ],每次更改代码后不会刷新网页了，直接应用
如果是通过style-loader来处理CSS, 那么经过前面两步就已经实现了热更新 如果是通过MiniCssExtractPlugin.loader来处理CSS, 那么还需要额外配置MiniCssExtractPlugin.loader 在 loader:"MiniCssExtractPlugin.loader"后面添加 options:{ hmr: true } JS实现实时热更新此时我们在js中引入另一个js import '../css/index.less'; import {AddSpan} from './111.js'; let oDiv=document.createElement('div'); oDiv.setAttribute('class','divv'); document.body.appendChild(oDiv); AddSpan(); 111.js function AddSpan(){ //创建span let oSpan=document.createElement('span'); //span内容 oSpan.innerText='www.lishouxin.com'; //添加到网页 document.body.appendChild(oSpan); }; //暴露函数 export {AddSpan};
此时我们去修改111.js中的内容 oSpan.innerText='www.修改.com'; 并没有热更新 需要刷新才能改变
需要我们自己处理 // 判断当前有没有开启热更新 if(module.hot){ // 告诉热更新需要监听哪一个JS模块的变化 module.hot.accept("./111.js", function () { //最好是把之前的span删掉 便于观察 let oSpan = document.querySelector("span"); document.body.removeChild(oSpan); //这样就可以热更新了，监听变化后重新运行添加 addSpan(); }); }此时刷新网页后,去修改js就会时时热更新了
标签: webpack HMR 热更新 webpack-babel-转换ES678语法 webpack-CORS解决跨域问题 |
【本文地址】
今日新闻 |
推荐新闻 |