less webpack 热更新_Webpack如何配置热更新

什么是HMR

是指 Hot Module Replacement，缩写为 HMR。对于你需要更新的模块，进行一个"热"替换，所谓的热替换是指在不需要刷新页面的情况下，对某个改动进行无缝更新。如果你没有配置HMR，那么你每次改动，都需要刷新页面，才能看到改动之后的结果，对于调试来说，非常麻烦，而且效率不高，最关键的是，你在界面上修改的数据，随着刷新页面会丢失，而如果有类似Webpack热更新的机制存在，那么，则是修改了代码，不会导致刷新，而是保留现有的数据状态，只将模块进行更新替换。也就是说，既保留了现有的数据状态，又能看到代码修改后的变化。

总结：

加载页面时保存应用程序状态

只更新改变的内容，节省调试时间

修改样式更快，几乎等同于在浏览器中更改样式

依赖

package.json：

"dependencies": {

"css-loader": "^3.2.0",

"style-loader": "^1.2.1",

"webpack": "^4.41.2",

"webpack-dev-server": "^3.10.1"

},

复制代码

配置

webpack:

devServer: {

contentBase: path.resolve(__dirname, 'dist'),

hot: true,

historyApiFallback: true,

compress: true

},

复制代码hot为true，代表开启热更新

contentBase表示告诉服务器从哪里提供内容。(也就是服务器启动的根目录，默认为当前执行目录，一般不需要设置)

historyApiFallback使用HTML5历史记录API时，index.html很可能必须提供该页面来代替任何404响应

compress对所有服务启用gzip压缩

plugins: {

HotModuleReplacementPlugin: new webpack.HotModuleReplacementPlugin()

},

复制代码

配置热更新插件

module: {

rules: [

{

test: /\.(css|less)$/,

use: [

process.env.NODE_ENV == 'development' ? { loader: 'style-loader' } : MiniCssExtractPlugin.loader,

{

loader: 'css-loader',

options: {

importLoaders: 1

}

}

]

}

]

},

复制代码

style-loader库实现了HMR接口，当通过HMR收到更新时，它将用新样式替换旧样式。区分开发环境和生产环境，用不同loader。

src/index.jsx：

if (module.hot) {

module.hot.accept();

}

复制代码

入口文件，新增上面代码，就可以了，非常简单。

如何保存状态

使用react-hot-loader插件，传送门

如何使用

安装

$ npm install react-hot-loader

复制代码

配置babelrc

// .babelrc

{

"plugins": ["react-hot-loader/babel"]

}

复制代码

将根组件标记为热导出

import { hot } from 'react-hot-loader/root';

const App = () =>

Hello World!

;

export default hot(App);

复制代码

在react和react dom之前，确保需要react热加载程序

// webpack.config.js

module.exports = {

entry: ['react-hot-loader/patch', './src'],

// ...

};

复制代码

遇到问题

如果遇到You cannot change ，那么应该这样配置：

import { hot } from 'react-hot-loader/root';

const Routes = () => {};

export default hot(Routes);

复制代码

案例

遇到问题

配置完热更新之后，遇到webpack自动编译两次问题，很大概率出现，具体原因，没有分析，找到一个讨巧的解决办法，配置：

watchOptions: {

aggregateTimeout: 600

},

复制代码

也有可能是其他问题，比如你在index.html页面，重复引入了index.js，又或者是全局安装了webpack-dev-server，与本地webpack-dev-server重复，卸载全局webpack-dev-server，即可。