美文网首页React
[搬运]让 create-react-app 支持热加载

[搬运]让 create-react-app 支持热加载

作者: 柏丘君 | 来源:发表于2017-06-04 22:03 被阅读299次

    React 官方的 create-react-app 很好用,可以轻松的构建 React 项目,但也有一些小痛点,比如对热加载的支持不好。
    要让 create-react-app 支持热加载,需要做一些配置上的修改。本文搬运至 http://joshbroton.com/add-react-hot-reloading-create-react-app/
    1.弹射 create-react-app 配置

    npm run eject
    

    通过该命令可以将 create-react-app 的配置弹射到当前工作目录下。

    2.安装 react-hot-loader
    注:这里需要安装 next 版本。

    npm install --save-dev react-hot-loader@next
    

    3.安装 babel 的 stage-x 支持

    npm install --save-dev babel-parset-stage-1
    

    4.修改 package.json 中的 babel 配置

    "babel": {
      "presets": [
        "react-app",
        "stage-1"
      ],
      "plugins": [
        "react-hot-loader/babel"
      ]
    },
    

    5.修改 webpack.config.dev.js 配置文件,在入口处加上如下配置

    module.exports = {
      ...
      entry: [
        'react-hot-loader/patch',
    ...
    

    6.在入口文件中引入 AppContainer 组件,所有的组件都需要使用该组件包裹

    import {AppContainer} from 'react-hot-loader';
    
    const render = ( Component ) => {
        ReactDOM.render(
            <AppContainer>
                <Component />
            </AppContainer>,
            document.getElementById("root")
        );
    }
    render(ROOT);
    
    if(module.hot){
        module.hot.accept(ROOT, () => {
            render(ROOT)
        });
    }
    

    这里定义了一个 render 函数,组件需要更新时直接调用 render 函数即可。
    7.如何使 create-react-app 支持异步路由加载
    使 create-react-app 支持路由加载,可在 webpack.config.dev.js 和 webpack.config.prod.js 做以下修改:
    1)确保 output 选项中有以下配置:

    ...
    chunkFilename: 'static/js/[name].chunk.js',
    ...
    

    2)确保 plugins 中有以下配置:

    ...
    new webpack.optimize.CommonsChunkPlugin({ name:'common', filename:'static/js/common.js'}),
    ...
    

    如果是生产环境,建议 chunk 文件名加上 hash 字符串以阻止浏览器缓存:

    ...
    new webpack.optimize.CommonsChunkPlugin({ name:'common', filename:'static/js/common.[chunkhash:8].js'}),
    ...
    

    我们可以自由定制 create-react-app 的配置,只需将配置弹射(eject)出来,便可自由修改。

    完。

    相关文章

      网友评论

      本文标题:[搬运]让 create-react-app 支持热加载

      本文链接:https://www.haomeiwen.com/subject/xtfbfxtx.html