webpack打包react项目

1webpack简介

webpack是目前最流行的打包工具之一，是一个为前端模块打包构建而生的工具，它既吸取了大量已有的方案优点和教训，也解决了很多前端开发过程中已有的痛点，如代码的拆分与异步加载，对非js资源的支持，强大的loader设计使得它更像是一个构建平台，而不是打包工具。

2webpack,react开发环境

1）新建一个项目文件夹,进入此文件夹，创建package.json文件(npm init命令)

2）确认已安装webpack,web pack-dev-server模块

3）安装babel（babel不懂的请先看http://blog.csdn.net/jasonzds/article/details/56685225）babel的目的有两个(将es6转为es5,转换jsx语法)，

4) 安装babel-preset-es2015和babel-preset-react

5）安装babel-loader和 babel-core

6）babel工作需要.babelrc文件

{

     "presets":[ "react", "es2015"]

}

7)最重要的webpack.config.js文件的配置

var  path =  require( 'path');

var  webpack =  require( 'webpack');

var  HtmlwebpackPlugin =  require( 'html-webpack-plugin');

var  ROOT_PATH =  path. resolve( __dirname);

var  BUILD_PATH =  path. resolve( ROOT_PATH,  'build');

var  APP_PATH =  path. resolve( ROOT_PATH,  'app');

module. exports = {

     entry: {

         app:  path. resolve( APP_PATH,  'app.js')

    },

     output: {

         path:  BUILD_PATH,

         filename:  '[name].bundle.js'

    },

     resolve:{

         extensions:[ '', '.js', '.jsx'],

         root:APP_PATH

    },

     module:{

         loaders:[

            {

                 test:  /\.js? $ /,

                 loaders: [ 'babel-loader'],

                 include:  APP_PATH

            }

        ]

    },

     plugins:[

         new  HtmlwebpackPlugin({

             title:  'demo',

             filename: 'index.html'

        }),

    ]

}

这个应该是最简单的配置了，不懂的可以网上搜，其中用到HtmlwebpackPlugin，

这个插件是帮我们自动生成html页面，并自动引入打包后的.js文件，其中的参数意思是，title这个页面的title，filename生成的页面名字

8）最后的项目文件目录为

app是项目组件文件夹，test是测试文件

list.js代码

import  React  from  'react';

import  uuid  from  'uuid';

import  ListItem  from  '../listItem/listItem';

class  List  extends  React. Component {

     constructor( props) {

         super( props);

         this. state = {

             items: []

        }

    }

     handleclick() {

         const  value =  this. refs. addlist. value;

         const  str = {

             id:  uuid. v1(),

             text:  value

        }

         let  items =  this. state. items;

         items = [... items,  str]; //合并数值

         this. setState({

             items

        })

    }

     //删除其中的

     deleteItem( id) {

         this. setState({

             items:  this. state. items. filter(

                 result  =>  result. id !==  id

            ),

        });

    }

     render() {

         const  ListIt =  this. state. items. map( item  => {

             return (

                 < ListItem  key={ item. id}  name={ item}  onDelete={ this. deleteItem. bind( this)}  />

            );

        });

         return (

             < div  className= "list" >

                 < input  type= "text"  placeholder= "请输入"  ref= "addlist"  />

                 < button  className= "addbutton"  onClick={ this. handleclick. bind( this)} >添加值 </ button >

                 < ul >

                    { ListIt}

                 </ ul >

             </ div >

        );

    }

}

export  default  List;

listitem.js

import  React  from  'react';

class  ListItem  extends  React. Component {

     render() {

         const  text =  this. props. name;

         return (

             < li  onClick={()  =>  this. props. onDelete( text. id)} >

                 < span >{ text. text} </ span >

             </ li >

        )

    }

}

export  default  ListItem;

app.js文件

import  React  from  'react';

import  ReactDOM  from  'react-dom';

import  List  from  './list/list';

const  app =  document. createElement( 'div');

document. body. appendChild( app);

ReactDOM. render( < List  />,  app);

9）最后的package.json文件

{

   "name":  "csdndemo",

   "version":  "1.0.0",

   "description":  "",

   "main":  "index.js",

   "scripts": {

     "dev":  "webpack-dev-server --hot"

  },

   "author":  "",

   "license":  "ISC",

   "devDependencies": {

     "babel-core":  "^6.24.0",

     "babel-loader":  "^6.4.1",

     "babel-preset-es2015":  "^6.24.0",

     "babel-preset-react":  "^6.23.0",

     "html-webpack-plugin":  "^2.28.0",

     "react":  "^15.4.2",

     "react-dom":  "^15.4.2",

     "webpack":  "^1.14.0",

     "webpack-dev-server":  "^1.14.1"

  }

}

运行项目nam run dev

10)后续会有基于这个demo的测试enzyme库的使用，代码检测aslant，flux的使用，redux的使用