详解webpack2+React 实例demo


Posted in Javascript onSeptember 11, 2017

1.目录结构

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

详解webpack2+React 实例demo

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 #Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 #Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 #Javascript
js封装成插件的步骤方法
Sep 11 #Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 #Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 #Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 #Javascript
You might like
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
一段实时更新的时间代码
2006/07/07 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
借款协议书
2014/04/12 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
预备党员半年考察意见
2015/06/01 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Elasticsearch 批量操作
2022/04/19 Python