webpack-3 react-router-4 react-156 升级记录

说明

本文记录了从 webpack 2.x 升级到 3.x、React Router 4.1.2 升级以及 React 15.6.x 升级的相关变更内容及注意事项。

1. React Router 升级到 4.1.2

React Router 4.1.2 的升级版本对 API 有较大变动，具体变更内容请参考文章《React Router 4 升级攻略》。

2. 从 webpack 2.x 升级到 3.x

webpack 3.x 的升级相对 2.x来说，配置文件无需大幅修改，但新增了多个功能和性能优化。以下是主要变更点：

作用域提升（Scope Hoisting）：webpack 3 提供了插件来提升作用域，移除模块封装函数，减少了浏览器 JavaScript 运算负担。
```
module.exports = {
    plugins: [
        new webpack.optimize.ModuleConcatenationPlugin()
    ]
}
```
开发环境下启用该插件会导致 HMR 加载速度减慢，建议仅在生产环境使用。

webpack-dev-server URL 问题：升级后可能会出现 http://0.0.0.0:2222/undefined 的问题，需在 dev-server 配置中添加 openPage: '' 来修复。

devServer: {
    contentBase: defPath.DEV_PATH,
    publicPath: '/',
    historyApiFallback: true,
    clientLogLevel: 'none',
    host: ip,
    port: 8090,
    open: true,
    openPage: '', // 解决 undefined 链接
    hot: true,
    inline: true,
    compress: true,
    stats: {
        colors: true,
        errors: true,
        warnings: true,
        modules: false,
        chunks: false
    }
}

3. React 升级到 15.6.x

React 15.6.x 的升级主要是内部优化和功能调整，以下是需注意事项：

第三方组件引用：部分已弃用的 React 组件可能会对外部库产生兼容性问题，需根据具体项目情况进行适配。

升级变化

1. 作用域提升（Scope Hoisting）

webpack 3 引入了作用域提升功能，解决了模块封装函数导致的性能问题。通过启用 ModuleConcatenationPlugin，可以移除不必要的封装函数，减小输出包体积并提升加载速度。

2. webpack-dev-server URL 修复

升级后的 webpack-dev-server 在某些版本中可能会导致自动打开的页面链接出现 undefined 错误。为解决此问题，需在 dev-server 配置中添加 openPage: ''。

3. HMR（热模块更新）

升级后，HMR 的配置可能需要相应调整。以下是修复方案：

Babel 配置：无需修改，Babel 对 webpack 配置无影响。

项目入口文件：确保入口文件正确引用模块，并保留热模块更新的代码。

if (module.hot && process.env.NODE_ENV !== 'production') {
    module.hot.accept('./routes.js', (err) => {
        console.log('module hot');
        if (err) {
            console.log(err);
        }
        const NextComponent = require('./routes.js').default;
        render(NextComponent);
    });
}

路由部分代码：请确保路由配置文件正确无误，避免出现 undefined 路由路径。
```
     
```

路由部分代码示例

import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import {App, Home, Test} from './containers/index';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
const Root = () => (
    
   
        
    
            
     
       (
                
      
                    
       
                        
        
                        
        
                        
        
                        
        
                    
       
                
      
            )} />
            
      
        (
                
       
            )} />
        
      
     
    
    
   
);
export default Root;

以上内容结合了从 webpack 3.x、React Router 4.1.2 和 React 15.6.x 升级后的重要变更和注意事项，供开发者参考使用。

转载地址：http://yfvoz.baihongyu.com/

你可能感兴趣的文章