基于React+webpack的项目环境搭建（基础配置）
1，安装node.js
2，使用npm包管理工具下载webpack
npm install webpack -g
3，创建项目文件夹，并通过命令行进入到该文件夹下配置package.json
npm init
4，使用npm下载相关依赖
//下载react以及react-dom相关依赖
npm install react react-dom --save
//下载开发相关依赖 babel-preset-es2015用来转义ES6语法 babel-preset-react 用来转义jsx语法
npm install babel-loader babel-core babel-polyfill babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev
5，项目目录下创建webpack.config.js用作webpack配置文件
var path = require('path'); //引入path模块，该模块为node.js模块，主要是用来匹配路径
module.exports = {
entry:'./src/main.js', //webpack编译入口文件
output:{
path:path.join(__dirname,'/dist'), //输出文件路径
filename:'bundle.js' //输出文件名
}，
modules:{
loaders:[
{
test:/\.js$/, //正则匹配以.js结尾的文件
loader:'babel', //将匹配成功的文件用babel-loader编译
exclude:/node_modules/, //匹配剔除node_ modules文件夹中的内容
query:{
presets:['es2015','stage-0','react']
}
}
]
}
}
6，文件目录如下
index.html //主页html
README.md //项目说明
webpack.config.js //webpack配置文件
package.json //npm配置说明 查看编译所需依赖
src //开发目录
main.js //入口文件
component //子组件文件目录
dist //编译目录
bundle.js //编译文件
7，index.html 引入bundle.js
<docutype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>This is React Porject</title>
<head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
8，下面就可以开始正式的react+webpack+es6的编程之旅了，main.js如下
import React from 'react'; //引入react库
import {render} from 'react-dom'; //引入react-dom库中的render方法
const App = React.createClass({ // 定义一个组件，组件名为App getInitialState为初始化state的值，render为渲染dom,里面写jsx语法
getInitialState:function(){
return {
item:'react'
}
},
render(){
return (<div>Hello {this.state.item}</div>)
}
})
render(<App />,document.getElementById('app')); //将App组件render到页面的ID为app的元素中
//另外一种定义组件的方法，基于ES6语法
import React,{ Component } from 'react';
import {render} from 'react-dom';
class App extends Component{
constructor(){
super();
this.state = {
msg:'react'
}
}
render(){
return (<div>Hello {this.state.msg}</div>)
}
}
render(<App />,document.getElementById('app'));
9，在控制台输入webpack进行编译打包
webpack //编译打包
webpack -p //编译打包压缩
411
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
