1.目录结构

源文件在src目录下，打包后的文件在dist目录下。

2.webpack.config.js

说明：
1.涉及到的插件需要npm install安装；
2.html-webpack-plugin创建服务于 webpack bundle 的 HTML 文件；
3.clean-webpack-plugin清除dist目录重复的文件；
4.extract-text-webpack-plugin分离css文件。

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;var config = {context: path.resolve(__dirname, './src'),entry: {app: './main.js'},output: {path: path.resolve(__dirname, './dist'),filename: '[name].bundle.js'},devtool: 'cheap-module-eval-source-map',module: {rules: [{test: /\.jsx?$/,exclude: /node_modules/,loader: 'babel-loader'},{test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: ["css-loader","postcss-loader"]})},{test: /\.less$/,use: ["style-loader","css-loader","less-loader"]},{ test: /\.(png|jpg)$/,loader: 'url-loader',options: {limit: 8129}}]},devServer:{historyApiFallback: true,host:'0.0.0.0',hot: true, //HMR模式   inline: true,//实时刷新port: 8181 // 修改端口，一般默认是8080},resolve: {extensions: ['.js', '.jsx', '.css'],modules: [path.resolve(__dirname, './src'), 'node_modules']},plugins: [ new webpack.HotModuleReplacementPlugin(),new UglifyJsPlugin({sourceMap: true}),new webpack.LoaderOptionsPlugin({minimize: true,debug: true}),new HtmlWebpackPlugin({template:'./templateIndex.html' }),new ExtractTextPlugin({filename: '[name].[hash].css',disable: false,allChunks: true,}),new CleanWebpackPlugin(['dist'])],}
module.exports  = config;// webpack里面配置的bundle.js需要手动打包才会变化,目录可以由自己指定;
// webpack-dev-server自动检测变化自动打包的是开发环境下的bundle.js,打包路径由contentBase决定,两个文件是不一样的.

3.postcss.config.js(Autoprefixer)

module.exports = {plugins: {'autoprefixer': {browsers: 'last 5 version'}}
}// 兼容最新的5个浏览器版本

4.新建.babelrc

{"presets": ['es2015','react','stage-3']
}

5.index.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>React Project</title></head><body><div id="content"></div><script src="app.bundle.js"></script></body>
</html>

6.package.json

npm install 或 yarn -> 安装模块，npm run build -> 打包，npm start -> 启动localhost:8181

{"name": "reactproject","version": "1.0.0","description": "","main": "index.js","dependencies": {"jquery": "^3.1.1","react": "^15.3.2"},"devDependencies": {"autoprefixer": "^7.1.2","babel-core": "^6.14.0","babel-loader": "^6.2.5","babel-plugin-syntax-async-functions": "^6.13.0","babel-plugin-transform-async-to-generator": "^6.16.0","babel-preset-es2015": "^6.14.0","babel-preset-react": "^6.11.1","babel-preset-stage-3": "^6.17.0","bootstrap": "^4.0.0-alpha.2","clean-webpack-plugin": "^0.1.16","css-loader": "^0.25.0","extract-text-webpack-plugin": "^3.0.0-rc.2","file-loader": "^0.9.0","html-webpack-plugin": "^2.29.0",  "jshint": "^2.9.3","jshint-loader": "^0.8.3","json-loader": "^0.5.4","less": "^2.7.1","less-loader": "^2.2.3","moment": "^2.15.1","node-sass": "^3.10.0","postcss-loader": "^2.0.6", "react-bootstrap": "^0.30.5","react-dom": "^15.3.2","sass-loader": "^4.0.2","style-loader": "^0.13.1","url-loader": "^0.5.7","webpack": "^3.3.0","webpack-dev-server": "^2.5.1"},"scripts": {"start": "webpack-dev-server --hot --inline --progress --colors --content-base .","build": "webpack --progress --colors"},"keywords": ["reactcode"],"author": "xhh","license": "ISC"
}

7.main.js:入口文件

import React from 'react'
import { render } from 'react-dom';
import $ from 'jquery';import Demo1 from './js/demo1.js';
// import Demo2 from './js/demo2.js';render(<Demo1 title="这是提示" />, $('#content')[0]);
// render(<Demo2 myName="园中桥" sex="female"/>, $('#content')[0]);

8.templateIndex.html

打包后的模板index文件，插件html-webpack-plugin的template指定的目录。

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>Template Index html</title></head><body><div id="content"></div></body>
</html>

9.demo

demo1.js

import React from 'react';
import '../css/demo1.css';const arr = [{name:'name1',tel:'12343456783'},{name:'name2',tel:'12343456784'},{name:'name3',tel:'12343456785'}
];export default class Demo1 extends React.Component {constructor(props) {super(props);this.state = {content: true,value: 'inputText'};   }handleClick(){this.setState({content: !this.state.content})// this.refs.myInput.focus();}handleChange(event) {this.setState({value: event.target.value});}renderArr() {return arr.map((item,index)=>{return <li key={index}>name:{item.name},tel:{item.tel}</li>})}render(){let btnStyle = {border: '1px solid #ccc',background:'#fff',color: '#a106ce'}return (/* 注释 */<div><button style={btnStyle} className="btn" type="button" onClick={()=>this.handleClick()}>change state</button><br/><p title={this.props.title} style={{ color:'#A349A4' }}>Hello { this.props.textCont}!</p><p>{this.state.content ? 'initial value' : 'later value'}</p>{ /* 标签里面的注释外面要用花括号 */ }<input type="text" value={this.state.value} ref="myInput" onChange={this.handleChange.bind(this)} /> <h4>{this.state.value}</h4><DemoChild><p>lalala</p></DemoChild><ul>{ this.renderArr() }</ul></div>)}
}Demo1.propTypes = {title: React.PropTypes.string.isRequired
}
Demo1.defaultProps = {textCont: 'React'
}class DemoChild extends React.Component {constructor(props) {super(props);}render(){return (<div>我是子组件{this.props.children}</div>)}
}

demo1.css

ul {list-style: none;padding: 0;margin:0;display: flex;
}
.btn:focus {outline: none;
}

demo2.js:父子组件生命周期

import React, { Component, PropTypes } from 'react';
import '../css/demo2.css';export default class Demo2 extends Component {constructor(props){super(props);this.state = {stateName: this.props.myName + ',你好',count: 0,}console.log('init-constructor');}static get defaultProps() {return {myName: "xhh",age: 25}}doUpdateCount(){this.setState({count: this.state.count+1})}componentWillMount() {console.log('componentWillMount');}componentDidMount() {console.log('componentDidMount')}componentWillReceiveProps(nextProps){console.log('componentWillReceiveProps')}shouldComponentUpdate(nextProps, nextState){console.log('shouldComponentUpdate');// return nextProps.id !== this.props.id;if(nextState.count > 10) return false;return true;}componentWillUpdate(nextProps,nextState){console.log('componentWillUpdate');}componentDidUpdate(prevProps, prevState){console.log('componentDidUpdate');}componentWillUnmount(){console.log('componentWillUnmount');}render(){console.log('render');return (<div><p className="colorStyle">姓名：{this.props.myName}</p><p>问候：{this.state.stateName}</p><p>年龄：{this.props.age}</p><p>性别：{this.props.sex}</p><p>父元素计数是:{this.state.count}</p><button onClick={ this.doUpdateCount.bind(this) } style={{ padding: 5,backgroundColor: '#ccc' }}>点我开始计数</button><SubMyPropType count1={this.state.count} /></div>)}
}Demo2.propTypes = {myName: PropTypes.string,age: PropTypes.number,sex: PropTypes.string.isRequired
}class SubMyPropType extends Component {componentWillMount() {console.log('subMyPropType-componentWillMount');}componentDidMount() {console.log('subMyPropType-componentDidMount')}componentWillReceiveProps(nextProps){console.log('subMyPropType-componentWillReceiveProps')}shouldComponentUpdate(nextProps, nextState){console.log('subMyPropType-shouldComponentUpdate');if(nextProps.count1 > 5) return false;return true;}componentWillUpdate(nextProps, nextState){console.log('subMyPropType-componentWillUpdate');}componentDidUpdate(prevProps, prevState){console.log('subMyPropType-componentDidUpdate');}componentWillUnmount(){console.log('subMyPropType-componentWillUnmount');}render(){console.log('subMyPropType-render');return(<p>子元素计数是:{this.props.count1}</p>) }
}

demo2.css

.colorStyle {color: #0f0;
}

webpack2+React 实例demo相关推荐

  1. 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo

    谈谈我对前端组件化中"组件"的理解,顺带写个Vue与React的demo 前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的 ...

  2. 关于React native Demo项目的总结

    简述 至于项目都是学习其他人的实战项目,这里不过是做一个学习总结,主要是记录下使用到的包和一些UI工具,以便于参考. react-navigation 页面跳转和转场动画 react-native-s ...

  3. java多附件上传 实例demo

    java多附件上传 实例demo <%@ page language="java" import="java.util.*" pageEncoding=& ...

  4. 3 weekend110的hadoop中的RPC框架实现机制 + hadoop中的RPC应用实例demo

    hadoop中的RPC框架实现机制 RPC是Remotr Process Call, 进程间的远程过程调用,不是在一个jvm里. 即,Controller拿不到Service的实例对象. hadoop ...

  5. java实例拷贝,Apache Commons包 BeanUtils 对象拷贝实例demo

    Apache Commons包 BeanUtils 对象拷贝实例demo 发布时间:2019-05-08作者:laosun阅读(1846) Apache Commons包 BeanUtils 对象拷贝 ...

  6. (转）open gl 实例 demo ---vs2005 环境

    (转)open gl 实例 demo ---vs2005 环境 http://blog.chinaunix.net/uid-20622737-id-1912923.html posted on 201 ...

  7. java JFreechart开发报表的实例demo下载

    原文:java JFreechart开发报表的实例demo下载 源代码下载地址:http://www.zuidaima.com/share/1550463472110592.htm 运行效果图如下: ...

  8. React实例响应式设计和数据绑定

    React实例响应式设计和数据绑定 React中的响应式设计原理和数据的绑定方法,俗话说的好:"宝剑磨的好,理论不能少".这节课我们不仅要编写效果,还要讲理论,这节课很重要!!!, ...

  9. pyhton学习实例demo

    pyhton学习实例demo 一行代码输出特定字符"Love"拼成的心形 一行代码打印九九乘法表 一行代码打印九九乘法表 一行代码计算出1-100之间的素数(两个版本) 一行代码输 ...

最新文章

  1. SC-A-LOAM：在A-LOAM中加入回环检测
  2. 专访Niclas Hedhman：Apache欢迎什么样的开源项目？
  3. android subString
  4. 三维重建5：场景中语义分析/语义SLAM/DCNN-大尺度SLAM
  5. 面经——小米面经（2021春招）
  6. 推荐算法--总结（08）
  7. Yam Finance和UMA合作推出Degenerative Finance
  8. 大白话讲解Promise（三）搞懂jquery中的Promise
  9. Javascript数据类型共有六种
  10. mysql 不同的记录_Mysql通过一个限制条件，查出多条不同的记录
  11. matlab中全局变量的作用域,在simulink中使用全局变量的方法
  12. Python 网络爬虫：Scrapy框架下爬虫的简单思路
  13. RecyclerView多条目加载
  14. 生鲜电商纷纷传上市，但赛道并不性感
  15. 【css】图片的内容阴影处理
  16. 浪潮服务器内存故障怎么修复,浪潮GS客户端出现内存溢出和存储空间不足的问题说明和解决方案 | 浪潮888博客...
  17. 高通正式发布骁龙 778G 5G 芯片
  18. Android在应用中打开系统播放器
  19. 调试winddows程序(windbg 和 Debug Diagnostic Tool)
  20. 计算机老师的作文,电脑,我的好老师作文

热门文章

  1. 被人画是怎样一种体验？
  2. Git使用方法——原创
  3. nosql介绍、memrcached介绍、安装memcached、查看memcachedq状态
  4. 【Leetcode】62. 不同路径
  5. Saltstack基本安装部署
  6. shiro spring boot thymeleaf
  7. RabbitMQ官方中文入门教程(PHP版) 第三部分:发布／订阅（Publish/Subscribe）
  8. Linux下如何进行FTP设置
  9. Unity3D之预设
  10. 解决stamp mismatch with graph file