easywebpack 是通过 koa-webpack-hot-middleware 和 koa-webpack-dev-middleware 插件实现热更新机制。具体实现封装成独立 webpack-tool 插件,该插件除了集成在 easywebpack 里面,同时也可以单独使用。下面详细说明 easywebpack 实现流程。

实战项目热更新实现

React 项目热更新实现

  • ${root}/.babelrc 文件配置

    项目需要安装 npm install react-hot-loader –save-dev 依赖

{
 "env": {
    "development": {
      "plugins": [
        "react-hot-loader/babel"
      ]
    }
  }
}
  • webpack entry 入口代码 app.js
'use strict';
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { AppContainer } from 'react-hot-loader';
import createStore from './store';
import Routes from './router'
import './app.css';

const App = () => {
  return EASY_ENV_IS_DEV ? <AppContainer><Routes /></AppContainer> : <Routes />;
};

const Entry = () => (<div>
  <Provider store={ createStore() }>
    <App />
  </Provider>
</div>
);

ReactDOM.render(<Entry />, document.getElementById('app'));

if (EASY_ENV_IS_DEV && module.hot) {
  module.hot.accept();
}
  • 实例项目

https://github.com/easy-team/easywebpack-awesome/tree/master/boilerplate/react
https://github.com/keenwon/Egg-Webpack-Starter

Vue 项目热更新实现

vue 项目无需额外配置,直接使用 Webpack 热更新配置 和 启动 koa webpack 编译服务即可

https://github.com/easy-team/easywebpack-awesome/tree/master/boilerplate/vue

easywebpack 配置说明

  • vue ssr 本地开发时, css 是 js 内敛的, 无需开启; 如果采用 css 分离模式,请显示开启该配置。
  • react ssr 开发模式 css 时, css 是分离出来的,默认开启。

Webpack 热更新原理实现

在具体项目开发时,不需要自己实现热更新配置和启动服务,这些都已经集成到 easywebpack 体系里面。

Webpack 热更新配置

**
image.png

转化为 webpack 配置

module.exports = {
  entry: {
    app: [
      "webpack-hot-middleware/client?path=http://127.0.0.1:9000/__webpack_hmr&noInfo=false&reload=true",
      "src/index.js"
    ]
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
}

启动 koa webpack 编译服务

const webpack = require('webpack');
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);

app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: true, publicPath: webpackConfig.output.publicPath
}));

app.use(require("koa-webpack-hot-middleware")(compiler));

相关文档


Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
资源依赖 资源依赖
easywebpack 静态资源 manifest 文件easywebpack 3.5.0 新增自定义插件 webpack-manifest-resource-plugin 替换 webpack-manifest-plugin。 之前的 manifest 依赖关系是在 Egg 运行期间解析的,...
2020-05-31 sky
Next 
HTML 工程方案 HTML 工程方案
easywebpack-html 纯静态页面构建解决方案支持纯静态页面构建支持 nunjucks 模版方式构建如何利用 easywebpack-cli工具快速获得一个骨架项目使用easy-cli你将得到一个具备以下能力的骨架项目:基于Nunjucks模版引擎的模版项目。Why? 借助模版引擎...
2020-05-31 sky