webpack构建react项目和处理组件的依赖

最新推荐文章于 2022-05-08 23:33:05 发布

Web攻城狮

最新推荐文章于 2022-05-08 23:33:05 发布

阅读量3.9k

点赞数 2

分类专栏： react 文章标签： webpack 构建react项目处理组件的依赖 webpack构建react项目和处理组组件

本文链接：https://blog.csdn.net/b1244154318/article/details/52705374

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

webpack构建react项目和处理组件的依赖

webpack的简介:
是facebook另一个神器，与react配合开发是目前web前端最主流的技术
从诞生开始就是瞄准了目前的大型单页面app的开发

1.能够实现管理模块依赖
2.代码分割，资源压缩
3.抽取公共模块的功能

首先应该有nodejs的环境:

1.通过npm安装webpack npm install webpack -g

2.新建项目目录在cd中切换到目录下

3.将webpack安装到目录中 npm install webpack --save-dev

4 安装成功以后在dos下输入webpack测试是否成功（10分钟）

针对于模块化开发和构建的工具

1.问题引出:如何解决依赖?
2.如何将依赖的file合并到一个里面
3.如何在执行

在当前目录下安装react 和react-dom组件
npm install react
npm install react-dom
实现父组件嵌套子组件并且在父组件中引入需要依赖的子组件
提问？如何引入？

1.在父组件中直接通过require('子组件资源位置')
2.子组件中需要通过module.exports=组件名称（模块别名）

也就是说webpack这个构建工具
也类似seajs这些模块化框架，实际上都是依赖nodejs进行实现的
问题来了？
这样依赖以后但是浏览器有办法识别吗？如果不能识别如何进行操作？

npm install jsx-loader --save-dev
通过jsx-loader将入口jsx转义成原生js，再通过webpack将原生js
中的依赖合并到一个文件中输出,最后执行输出的文件就可以实现页面在浏览器中打开了

问题来了？我们在使用gulp的时候要在gulpfile中配置任务
那使用webpack需要不需要配置？

1.在项目根目录下面新建webpack.config.js

2.在js中定义
module.exports={

}
因为webpack的执行都是基于json的配置
3在之前定义的object内部定义入口，主程序的入口(默认启动入口)

entry:'./js/ReactComponent.jsx',

4.定义输出的路径和输出的文件别名
output:{
path:'./js',
filename:'app.js',
},

5.定义module,定义被加载文件的格式，和使用的编译器
module:{
loaders:[{

test:/\.jsx$/,
loader:'jsx-loader'

}]
}
6.一切ok以后在dos下面输入webpack指令就可以看见指定的目录下出现被编译

的文件

具体的事例如下:完成了单页面的开发.

index代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>模块开发</title>
</head>
<body>
<div id="app"></div>
	<script src="js/style.js" type="text/javascript"></script>
</body>
</html>

Main代码:(负责将所有的header,content,footer添加到index.html页面中)

var React = require("react")
var ReactDOM=require("react-dom")
var Header= require("./header.js")
var Content =require("./content.js")
var Footer=require("./footer.js")
var Main = React.createClass({
	render:function(){
		return(
			<div>
				<header>
					<Header/>
				</header>
				<section>
					<Content/>
				</section>
				<footer>
					<Footer/>
				</footer>
			</div>
		)
	}
});
ReactDOM.render(<Main/>,document.getElementById("app"))

header代码:

var React = require("react")
var Header= React.createClass({
	
	render:function(){
		var style={
		height:"10vh",
		background:"red",
		fontSize:"50px",
		textAlign:"center",
		lineHeight:"60px"
	}
		return(
			<div style={style}>我是头部1</div>
		)
	}
})
module.exports=Header;

content代码:

var React = require("react") 
var Content=React.createClass({
	render:function(){
		var style={
		height:"80vh",
		background:"green",
		fontSize:"50px",
		textAlign:"center",
		lineHeight:"60px"
	}
		return(
			<div style={style}>我是内容1</div>
		)
	}
})
module.exports=Content;

footer代码:

var React = require("react")
var Footer=React.createClass({
	render:function(){
		var style={
		height:"10vh",
		background:"blue",
		fontSize:"50px",
		textAlign:"center",
		lineHeight:"60px"
	  }
		return(
			<div style={style}>我是尾部1</div>
		)
	}
})
module.exports = Footer;

webpack.config.js代码:

module.exports={
	entry:'./block/Main.js',/**入口文件**/
	output:{/**输出目录**/
		path:'./js',/**输出路径**/
		filename:'style.js'/**输出文件名称**/
	},
	module:{
		loaders:[
			{ 
			    test: /\.js$/, /**通过入口处理匹配js文件**/
			    loader: "jsx-loader", /**使用哪个加载器 css－loader,coffee-loader,babel-loader**/
			}
		]
	} 
}
/****

1.通过入口 寻找入口里面调用的组件 文件  自动处理有依赖

2.代码整合 之所以实现a.js调用b.JS 整合都整合在了一个大文件中


***/

Web攻城狮

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack构建react项目和处理组件的依赖

webpack构建react项目和处理组件的依赖webpack的简介: 是facebook另一个神器，与react配合开发是目前web前端最主流的技术从诞生开始就是瞄准了目前的大型单页面app的开发1.能够实现管理模块依赖2.代码分割，资源压缩3.抽取公共模块的功能首先应该有nodejs的环境:1.通过npm安装webpack n
复制链接

扫一扫