热门搜索 :
宠物故事
您的当前位置:首页正文

基于webpack4搭建的react项目框架的方法

2023-11-29 来源:微宠网

本篇文章主要介绍了基于webpack4搭建的react项目框架的方法,内容挺不错的,现在分享给大家,也给大家做个参考。

介绍

框架介绍,使用webpac构建的react单页面应用,集成antd。使用webpack-dev-server启动本地服务,加入热更新便于开发调试。使用bundle-loader进行代码切割懒加载

手动搭建,不使用cli,大量注释适合初学者对webpack的理解学习,对react项目的深入了解

启动

 git clone https://gitee.com/wjj0720/react-demo.git cd react-demo yarn yarn start

打包

yarn build

目录结构

 +node_modules -src +asset +Layout +pages +redux +utils +app.js +index.html +index.js .babelrc package.json postcss.config.js webpack.config.js //webpack 配置

bundle-loader 懒加载使用

 // webpack.config.js 配置 module: { rules: [ { test: /.bundle.js$/, use: { loader: 'bundle-loader', options: { name: '[name]', lazy: true } } } ] } // 页面引入组件 import Home from "bundle-loader?lazy&name=[name]!./Home"; // 组件使用 因为组件懒加载 是通过异步的形式引入 所以不能再页面直接以标签的形式使用 需要做使用封装 import React, {Component} from 'react' import { withRouter } from 'react-router-dom' class LazyLoad extends Component { state = { LoadOver: null } componentWillMount() { this.props.Loading(c => { this.setState({ LoadOver: withRouter(c.default) }) }) } render() { let {LoadOver} = this.state; return ( LoadOver ? <LoadOver/> : <p>加载动画</p> ) } } export default LazyLoad // 通过封装的懒加载组件过度 增加加载动画 <LazyLoad Loading={Home} />

路由配置

框架按照模块划分,pages文件夹下具有route.js 即为一个模块

 // 通过require.context读取模块下路由文件 const files = require.context('./pages', true, /route.js$/) let routers = files.keys().reduce((routers, route) => { let router = files(route).default return routers.concat(router) }, []) // 模块路由文件格式 import User from "bundle-loader?lazy&name=[name]!./User"; export default [ { path: '/user', component: User }, { path: '/user/:id', component: User } ]

redux 使用介绍

 // ---------创建 -------- // 为了不免action、reducer 在不同文件 来回切换 对象的形式创建 // createReducer 将书写格式创建成rudex认识的reducer export function createReducer({state: initState, reducer}) { return (state = initState, action) => { return reducer.hasOwnProperty(action.type) ? reducer[action.type](state, action) : state } } // 创建页面级别的store const User_Info_fetch_Memo = 'User_Info_fetch_Memo' const store = { // 初始化数据 state: { memo: 9, test: 0 }, action: { async fetchMemo (params) { return { type: User_Info_fetch_Memo, callAPI: {url: 'http://stage-mapi.yimifudao.com/statistics/cc/kpi', params, config: {}}, payload: params } }, ... }, reducer: { [User_Info_fetch_Memo] (prevState = {}, {payload}) { console.log('reducer--->',payload) return { ...prevState, memo: payload.memo } }, ... } } export default createReducer(store) export const action = store.action // 最终在模块界别组合 [当然模块也有公共的数据(见Home模块下的demo写法)] import {combineReducers} from 'redux' import info from './Info/store' export default combineReducers({ info, 。。 }) // 最终rudex文件夹下的store.js 会去取所有模块下的store.js 组成一个大的store也就是我们最终仓库 // --------使用------ // 首先在app.js中将store和app关联 import { createStore } from 'redux' import { Provider } from 'react-redux' // reducer即我们最终 import reducer from './redux/store.js' // 用户异步action的中间件 import middleware from './utils/middleware.js' let store = createStore(reducer, middleware) <Provider store={store}> 。。 </Provider> // 然后组件调用 只需要在组件导出时候 使用connent链接即可 import React, {Component} from 'react' import {connect} from 'react-redux' // 从页面级别的store中导出action import {action} from './store' class Demo extends Component { const handle = () => { // 触发action this.props.dispatch(action.fetchMemo({})) } render () { console.log(this.props.test) return <p onClick={this.handle}>ss</p> } } export default connect(state => ({ test: state.user.memo.test }) )(demo)

关于redux中间件

 // 与其说redux中间件不如说action中间件 // 中间件执行时机 即每个action触发之前执行 // import { applyMiddleware } from 'redux' import fetchProxy from './fetchProxy'; // 中间件 是三个嵌套的函数 第一个入参为整个store 第二个为store.dispatch 第三个为本次触发的action // 简单封装的中间件 没有对请求失败做过多处理 目的在与项错误处理机制给到页面处理 const middleware = ({getState}) => next => async action => { // 此时的aciton还没有被执行 const {type, callAPI, payload} = await action // 没有异步请求直接返回action if (!callAPI) return next({type, payload}) // 请求数据 const res = await fetchProxy(callAPI) // 请求数据失败 提示 if (res.status !== 200) return console.log('网络错误!') // 请求成功 返回data return next({type, payload: res.data}) } export default applyMiddleware(middleware)

小编还为您整理了以下内容,可能对您也有帮助:

webpack如何搭建TS版React开发环境?

您可以使用webpack5搭建react+ts构建环境。以下是一些参考链接,其中包括了详细的配置和代码示例:

-【前端工程化】webpack5从零搭建完整的react18+ts开发和打包环境

-用webpack5+typescript从零搭建react+ts开发环境

-手把手教你用Webpack从零搭建一个React开发环境

-(TS)用Webpack5搭建React项目

webpack4之如何编写loader的方法步骤



之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。

这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。

1.编写入门级loader

我在之前的文章中,已经把webpack基础的内容基本上都过了一遍,现在开始准备复习更高级的webpack知识了,首先从loader开始。

首先初始化一个项目

npm init
然后安装依赖

cnpm install -D webpack webpack-cli
创建一个src目录,里面创建一个index.js



新建一个webpack.config.js,写入最基本的配置



如果此时,我们有个需求,中打包过程中,需要把world替换成mark,我们就可以借助loader来实现。首先在src同级目录新建一个loader文件夹,里面新建一个replaceLoader.js。



replaceLoader.js需要导出一个函数,注意:这个函数不能是箭头函数,因为webpack调用loader的时候会对this做一些变更,上面有一些方法,如果使用箭头函数,this指向就会有问题,没有办法调用this上的一些方法。

函数可以接受一个参数,参数是我们源代码的内容,所以可以对source进行操作后,return source,就可以改变源代码了。



然后使用我们自己写的loader,use就不填写loader名称了,需要写我们编写的loader的路径。



这样我们打包后发现,world已经被替换成mark了,这样我们就实现了一个最简单的loader。

2.给loader配置参数

loader中常常可以配置一些参数,那么我们如果想配置参数,要怎么做呢?



此时在replaceLoader中,可以通过this.query访问到参数。







这样打包后,结果就会替换成我们的参数,但是官方推荐我们使用loader-utils来传参。

cnpm install --save-dev loader-utils


这样打包的结果也是我们传入的参数。

3.this.callback

有时候我们不止要return一个resource,还可能要返回多个结果,就需要用到callback。

this.callback(
err: Error | null,
content: string | Buffer,
sourceMap?: SourceMap,
meta?: any
);
第一个参数是错误,第二个是结果,第三个是sourcemap,第四个可以是任何内容(比如元数据)



4. this.async

在loader中,如果我们直接调用setTimeout,就会报错,那么如果我们想进行异步操作要怎么做呢?



当要使用异步的时候,需要先把callback变为this.callback,然后再返回结果(和this.callback一样)。

这样再打包就不会有任何问题。

额外知识点:我们现在配置loader的时候,需要使用path.resolve,有没有什么方法可以像其他loader一样引用呢?



这样只写loader名称,webpack就会先到node_moles里面找,找不到就去当前目录下的loaders中去找。



webpack4之如何编写loader的方法步骤



之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。

这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。

1.编写入门级loader

我在之前的文章中,已经把webpack基础的内容基本上都过了一遍,现在开始准备复习更高级的webpack知识了,首先从loader开始。

首先初始化一个项目

npm init
然后安装依赖

cnpm install -D webpack webpack-cli
创建一个src目录,里面创建一个index.js



新建一个webpack.config.js,写入最基本的配置



如果此时,我们有个需求,中打包过程中,需要把world替换成mark,我们就可以借助loader来实现。首先在src同级目录新建一个loader文件夹,里面新建一个replaceLoader.js。



replaceLoader.js需要导出一个函数,注意:这个函数不能是箭头函数,因为webpack调用loader的时候会对this做一些变更,上面有一些方法,如果使用箭头函数,this指向就会有问题,没有办法调用this上的一些方法。

函数可以接受一个参数,参数是我们源代码的内容,所以可以对source进行操作后,return source,就可以改变源代码了。



然后使用我们自己写的loader,use就不填写loader名称了,需要写我们编写的loader的路径。



这样我们打包后发现,world已经被替换成mark了,这样我们就实现了一个最简单的loader。

2.给loader配置参数

loader中常常可以配置一些参数,那么我们如果想配置参数,要怎么做呢?



此时在replaceLoader中,可以通过this.query访问到参数。







这样打包后,结果就会替换成我们的参数,但是官方推荐我们使用loader-utils来传参。

cnpm install --save-dev loader-utils


这样打包的结果也是我们传入的参数。

3.this.callback

有时候我们不止要return一个resource,还可能要返回多个结果,就需要用到callback。

this.callback(
err: Error | null,
content: string | Buffer,
sourceMap?: SourceMap,
meta?: any
);
第一个参数是错误,第二个是结果,第三个是sourcemap,第四个可以是任何内容(比如元数据)



4. this.async

在loader中,如果我们直接调用setTimeout,就会报错,那么如果我们想进行异步操作要怎么做呢?



当要使用异步的时候,需要先把callback变为this.callback,然后再返回结果(和this.callback一样)。

这样再打包就不会有任何问题。

额外知识点:我们现在配置loader的时候,需要使用path.resolve,有没有什么方法可以像其他loader一样引用呢?



这样只写loader名称,webpack就会先到node_moles里面找,找不到就去当前目录下的loaders中去找。



webpack4 配置之 postcss-loader

postcss-loader 是我们在做项目的时候大多数都会用到的loader之一,它负责进一步处理 CSS 文件,比如添加浏览器前缀,压缩 CSS 等。

1.首先添加 browserslist ,

方法一:在项目根目录添加 .browserslistrc 文件

方法二:在 package.json 文件中添加 browserslist

2.配置 autoprefixer

方法一:在根目录创建 postcss.config.js:

方法二:在 webpack.config.js 中配置:

方法一: postcss.config.js (推荐)

方法二:webpack.config.js 配置

1.使用 style-loader :

2.使用 MiniCssExtractPlugin

webpack怎么自动编译reactjs

使用webpack编译打包react是非常便捷的。这也是人们常用的一种方式。但是在使用过程中,一定要注意一个细节,那就是webpack和babel-loader的安装位置。

react安装

当然,使用react必须先安装react和react-dom,其安装方式很简单(前提是我们必须安装有npm)。

# npm install react react-dom –save

react安装就这样简单,其实react和react-dom就是相当于js类库。但是我们需要解析器来解析react的语法。

react解析器babel安装

babel安装的位置是我们这篇文章的目的。babel有两种安装的位置:一种是全局安装,一种是本地安装——也就是安装在项目目录下的node_moles下。

# npm install babel-core babel-loader babel-preset-react –save-dev

//本地安装

#npm install babel-core babel-loader babel-preset-react –g

//全局安装

一般情况下我们选择本地安装,这样便于管理。

打包工具webpack的安装

同样,webpack的安装位置也是这篇文章描述的所要注意的点。当然,它也有两种安装的位置:全局安装和本地安装。

# npm install webpack –save-dev

//本地安装

# npm install webpack –g

//全局安装

如果选择本地安装,那么在使用的时候较麻烦一些,我们需要在命令前加上路径。所以一般情况下都是全局安装,这样就可以在任意位置直接使用。

这里我们选择全局安装。这样才能出现我们将要说的问题。

webpack配置文件编写

安装完webpack以后,下面来编写webpack配置文件webpack.config.js。这里我不写全部,只写加载loader部分。

代码一

mole:{

loaders: [

{

test: /\.js$/,

loader: 'babel',

query:{

presets:['react']

}

}

]

}

编译过程中出现的错误

好了,到了关键的地方了。现在我们整个系统的配置是这样的:babel安装到本地,webpack安装到全局位置,webpack配置文件如代码一所示。

接下来我们就要编译打包我们的项目。

# webpack

执行该命令以后,你会发现出现如下的错误:

ERROR in (webpack)/~/node-libs-browser/~/process/browser.js

Mole build failed: Error: Couldn't find preset "react" relative to

directory

"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"

……

这也就是说找不到babel-preset-react。

好了,说了这么多终于在这里引出了我们将要讨论的问题(这里大家不要嫌我啰嗦,为什么出现这种问题,其原因总要弄清楚。什么样的配置会出现这种问题,了解以后才容易上手解决)。

解决问题的方式

出现上述问题以后,我们有这样三种方式可以解决。

方式一

要解决这个问题很简单。我们知道,出现这个问题是因为bable和webpack安装的位置不同,所以找不到babel-preset-react。因为在配置文件中有这样一段代码。

query:{

presets:['react']

}

好了,既然知道是安装位置不同,那我们可以将babel安装在全局位置,这样这个问题不就解决了吗。

#npm remove babel-core babel-loader babel-preset-react –save-dev

//首先移除原先安装的babel

#npm install babel-core babel-loader babel-preset-react –g

//全局安装

没错,问题解决了。但是我们不推荐使用这种方式。因为这样不便于管理,所以还是使用其他的方式。

方式二

此种方式和方式一大同小异。方式一是改变babel的安装位置,而这里是改变webpack的安装位置。原先webpack是安装到全局位置的,所以找不到安装到本地项目目录下的babel-preset-react。因此我们可以改变webpack的位置。

# npm remove webpack –g

//移除原先的webpack

# npm install webpack –save-dev

//将webpack安装到本地位置——也就是项目目录下的node_moles中

# ln –s /项目根目录/node_moles/webpack/bin/webpack.js /usr/bin/webpack

//为了使用webpack方便,在这里我们在/usr/bin目录下建立软连接(也就是快捷方式)

//这样我们就可以在任意位置直接使用webpack命令了。

此时我们已经改变了webpack的安装位置。现在二者同在项目目录下安装。所以可以正确编译了。

此种方式较方式一,我个人比较推荐这种方式,这样比较方便管理。但是,这种方式也不是没有弊端。如果我们有多个项目,那我们就需要在每个项目下都安装webpack,那岂不是很麻烦。所以这种方式也不是很好。

方式三

该方式应该说是最值得推荐的,因为不需要改变webpack和babel的安装位置。webpack还是在全局位置,babel还是在本地项目位置下。我们需要做的就是修改webpack的配置文件,在代码一的基础上添加一句代码。

代码二

mole:{

loaders: [

{

test: /\.js$/,

loader: 'babel',

exclude:/node_moles/,

query:{

presets:['react']

}

}

]

}

微宠网还为您提供以下相关内容希望对您有帮助:

怎样使用开发react应用脚手架

1. 介绍在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧。大家都是用webpack + es6来结合react开发前端应用。这个时候,我们可以手动使用npm来安装各种插件,来从头到尾自己搭建环境。比如:npm install react react-dom --savenpm install babel babel-loader babel-...

webpack4之如何编写loader的方法步骤

1.编写入门级loader我在之前的文章中,已经把webpack基础的内容基本上都过了一遍,现在开始准备复习更高级的webpack知识了,首先从loader开始。首先初始化一个项目npm init然后安装依赖cnpm install -D webpack webpack-cli创建一个src目录,里面创建一个index.js新建一个webpack.config.js,写入最基本的...

create-react-app4和5的区别

默认使用Webpack 5:create-react-app 5.0默认使用Webpack 5,而create-react-app 4.0使用的是Webpack 4。

【Webpack4】CSS 配置之 postcss-loader

推荐使用文件 postcss.config.js 的方式:env 取值 process.env.NODE_ENV ,可用来判断是开发模式还是生产模式。当然也可以在 webpack.config.js 中,只是写起来有点冗余,尤其是需要在多个规则中用到 postcss-loader 时:压缩 CSS 其他方法可以参考 Webpack 文档中 这一段 。用 style-loader 时...

WEB前端目前的主要学习内容是什么?

1. 综合运用Web前端技术进行页面布局与美化。2. 综合运用Web前端开发框架进行Web系统开发。3. 熟练掌握Mysql、Mongodb数据库的发开。4. 熟练掌握vue.js、webpack、elementui等前端框技术。5. 熟练运用Node.js开发后台应用程序。6. 对Restful,Ajax,JSON,开发过程有深入的理解,掌握git的基本技能。知识...

Web前端的学习路线到底是什么,看完秒懂

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架,并且支持响应式布局。一经推出后颇受欢迎,一直是GitHub上的热门开源项目。在项目开发过程中,我们可以借助Bootstrap提供的CSS样式、组件、Java插件等快速的完成页面布局和样式设置,然后再有针对性的微调样式,这样基于框架进行...

web前端需要哪些技术?

以前大家常用的是JQuery、Bootstrap框架,现在形成React、Vue、Angular三大主流框架。 web前端开发一直是推陈出新速度最快,开发者最爱抱怨『学不动』的技术领域。每一个前端人都经历了不断学习的一年,因为前端开发依旧在不断变化: WebAssembly 正式成为第四种 Web 语言、 TypeScript 在业界大规模覆盖、 React 16.8 ...

web前端学习路线?

2. 2.核心高级:JavaScript高级编程,html5+css3,jQuery插件开发,模块化组件开,BootStrap Express(Node.js),MongoDB等。3. 3.前台交互:AJAX,REST API等。4.Web框架与项目管理:MVC、MVVM架构模式,VUE2,Webpack模块加载器&amp;打包工具,React等。5.跨平台开发:React Native,微信小程序,MUI等。想...

使用vue+vuex+koa2如何搭建开发环境

首先在你的开发工具(不管是webstorm还是sublime)里新建一个目录,用来搭建基于koa的web服务。在这里,我们不妨给这个目录起名为koa-demo。然后执行:// 进入目录cd koa-demo// 生成package.jsonnpm init -y// 安装以下依赖项npm i koanpm i koa-routernpm i koa-cors安装好koa和两个中间件,环境...

web前端开发需要学习什么知识?

于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git,实现整站项目完整功能并上线发布。 第四阶段:移动端和微信实战 阶段目标: 1.熟练掌握React.js框架,熟练使用React.js完成开发。 2.掌握移动端开发原理,理解原生开发和混合开发。 3.熟练使用react-native和Flutter框架完成移动端开发。 4.掌握微信小程序以及了解支付宝...

Top