Webpack

Webpack 页面入口配置

Webpack 配置文件 ${root}/webpack.config.js 。 该配置最终会通过 easywebpack-react 转换为完整的 Webpack 配置。（支持 Webpack 原生配置， 具体见 easywebpack）

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

• .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();

Sass/Less/Stylus 配置

语雀内容

Babel 相关配置

语雀内容

Css Module

语雀内容

自定义 manifest.json 路径

• 修改 webpack.config.js 生成 manifest.json 默认位置

语雀内容

• egg-view-react-ssr 的 manifest 默认配置修改

// ${root}/config/config.default.js
exports.reactssr = {
   manifest: path.join(app.baseDir, 'config/easy-manifest.json')
};