#ReactApp项目构建流程【3】
发布时间:2020-12-15 06:35:44 所属栏目:百科 来源:网络整理
导读:帮助程序员简化流程,专注业务代码的webpack配置 3.1项目中很有用的webpack常用配置 在传统html开发流程中,webapp开发模式中,前端代码改动很多,按照之前的流程跑的话,每次都需要npm run build以及run start,开发流程就会很繁琐 webpack dev server webp
帮助程序员简化流程,专注业务代码的webpack配置3.1项目中很有用的webpack常用配置在传统html开发流程中,webapp开发模式中,前端代码改动很多,按照之前的流程跑的话,每次都需要npm run build以及run start,开发流程就会很繁琐 webpack dev serverwebpack官方插件,通过webpack配置去启动一个微型服务器,便于开发者在开发过程中避免不必要的build以及start,并且该服务器编译出来的内容保存于内存中,一旦内容有更新,都会 Hot module replacement编辑工程时,帮助我们在修改代码后,页面
3.2具体配置__webpack dev server
3.3具体配置__Hot-module_replacement* `.babelrc`添加`presets`同级KV "plugins":["react-hot-loader/babel"] * `$npm i react-hot-loader@next -D` @next是因为当前为测试版,尚未正式发布到npm中 * `app.js`加入以下内容,[我的第2篇文章](https://segmentfault.com/a/1190000012945475) ``` if(module.hot){ //当我们需要热更新的代码有更新时,重新加载App module.hot('./App.jsx',()=>{ const NextApp=require('./App.jsx').default;//加default的原因在上面链接中有提到 ReactDOM.hydrate(<NextApp />,document.getElementById('root')); }) } * `$npm run dev:client` ``` 发现页面仍然会自动刷新,没有实现 * `client配置中` ``` hot:true解注释 const webpack=require('webpack') //顶部引入webpack config.plugins.push(new Webpack.HotModuleReplacementPlugins()); //与config.devServer同级添加webpack的HotModuleReplacementPlugins插件 //由于在.babelrc中添加了hotmodule配置,需要在开发时修改entry,由于只是在开发是进行修改,所以config.devServer中进行修改即可: config.entry={ app:[ 'react-hot-loader/patch',//客户端热更新代码时需要用到的补丁包 path.join(__dirname,'./client/app.js') //要打包的内容 ]//webpack的entry可以是个数组,代表着该entry中引用的文件,webpack在打包时会将所有的文件打包在一个文件中 } import React from 'react' import ReactDOM from 'react-dom' import { AppContainer } from 'react-hot-loader' //更新1:使用AppContainer去包裹我们的根节点想要渲染的实际HTML内容 import App from './App.jsx' //ReactDOM.hydrate(<App />,document.getElementById('root')); //更新2:封装成可传递参数的方法,此处注释掉 //将App挂载在document.body中,因为此时并没有模板,只有body可以使用,官方推荐在body中创建一个默认节点作为主dom const root=document.getElementById('root'); //更新3:根节点变量化 const render = Component =>{ const renderMethod=module.hot ? ReactDOM.render :ReactDOM.hydrate; //注意点! //如果不对是否采用react-hot-loader进行判断,npm run dev:client时,进入浏览器会弹出错误 //Warning: Expected server HTML to contain a matching <div> in <div>. renderMethod( <AppContainer> <Component /> </AppContainer>,root ) }; //更新4:更新2的封装 render(App); //更新5:传参调用更新4 if(module.hot){ module.hot.accept('./App.jsx',()=>{ const NextApp=require('./App.jsx').default; //ReactDOM.hydrate(<App />,document.getElementById('root')); //更新6,采用封装方法,此处注释 render(NextApp) //更新7,传参调用更新4 }) } * `npm run dev:client` 进入浏览器,修改内容,发现无需刷新即可更新内容,但是更新时间比较长, 想要更快更新,需要手动保存CTRL+S 另外,【如果】手动重启devServer后hotmodule失效(页面Elements刷新), 打开network,勾选Preserve log(用于保留刷新前的请求内容,防止刷新后以前的请求丢失导致不好定位问题),修改内容后查看请求url,发现404请求,url样式: http://localhost:3000/public6f45a1f9b1cb390b0ffb.hot-update.json 该文件通知hotmodule有模块更新以更新内容,发现public后缺失"/",需要在修改为 publicPath:'/public/',推荐后面都加上'/', 多'/'不会出现路径错误,少'/'却会在某些时候引发不可预期的错误 小结
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |