本文共 2560 字,大约阅读时间需要 8 分钟。
本文记录了从 webpack 2.x 升级到 3.x、React Router 4.1.2 升级以及 React 15.6.x 升级的相关变更内容及注意事项。
React Router 4.1.2 的升级版本对 API 有较大变动,具体变更内容请参考文章《React Router 4 升级攻略》。
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 }}
React 15.6.x 的升级主要是内部优化和功能调整,以下是需注意事项:
webpack 3 引入了作用域提升功能,解决了模块封装函数导致的性能问题。通过启用 ModuleConcatenationPlugin
,可以移除不必要的封装函数,减小输出包体积并提升加载速度。
升级后的 webpack-dev-server 在某些版本中可能会导致自动打开的页面链接出现 undefined
错误。为解决此问题,需在 dev-server 配置中添加 openPage: ''
。
升级后,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/