Webpack 标准配置

// ${root}/webpack.config.js
module.exports = {
  entry: {
    app: 'app/web/page/app/index.js',  // js 文件需要自己实现 react.render 逻辑
    hello: 'app/web/page/hello/index.jsx'  // 自动使用 react-entry-template-loader 模板 
  }
};

Webpack entry 配置说明

  • *.jsx *文件后缀这种模式可以直接渲染 React Component组件,而无需编写 React.render 初始化代码,统一react-entry-template-loader 插件提供的模板进行 React 页面初始化。也就是如下标准的 React Component

可以直接渲染出完整的 HTM 网页。

//${root}/app/web/page/hello/index.jsx
export default class Hello extends Component {
  render() {
    return <h1>Egg React Server Render</h1>
  }
}
  • *.js *文件后缀这种模式需要自己编写 React.render 代码且需要自己判断 SSR 还是前端渲染
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Layout from '../../component/layout.jsx';
import List from './componets/list';
import './index.css';

class ListPage extends Component {
  render() {
    return <div className="main">
        <div className="page-container page-component">
          <List list={this.props.list}></List>
        </div>
      </div>
  }
}

class ServerEntry extends Component {
  render() {
    return <Layout><ListPage {...this.props} /></Layout>;
  }
}

const clientEntry = () => {
  const root = document.getElementById('app');
  const state = window.__INITIAL_STATE__ || {};
  const render = () =>{
    ReactDOM.hydrate(EASY_ENV_IS_DEV ? <AppContainer><ListPage {...state}/></AppContainer> : <ListPage />, root);
  };
  if (EASY_ENV_IS_DEV && module.hot) {
    module.hot.accept();
  }
  render();
};

export default EASY_ENV_IS_NODE ? ServerEntry : clientEntry();

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
快速开始 快速开始
基于 Egg + React + Webpack 服务端渲染开发指南1. 项目初始化1.1 通过 easywebpack-cli 脚手架初始化安装脚手架 npm install easywebpack-cli -g 命令行,然后就可以使用 easy 命令命令行运行 easy init选择 e...
2019-12-23 sky
Next 
构建流程 构建流程
基于Egg+React+Webpack构建流程1. 本地Egg项目启动首先执行node index.js 或者 npm run dev 启动 Egg应用在 Egg Agent 里面启动koa服务, 同时在koa服务里面启动Webpack编译服务挂载Webpack内存文件读取方法覆盖本地文件读取...
2019-12-23 sky