react.js学习（1） webpack

来源：互联网发布：电脑报淘宝店怎么样编辑：程序博客网时间：2024/05/01 01:50

师父要我基于ES6开发，但是目前的浏览器暂不完全支持所有新语法特性，所以我需要将ES6编译为ES5。这里选择的是webpack

主要目录结构

1、安装webpack

 npm install webpack -g  npm install webpack --sava-dev

2、安装react、babel

npm install --sava react react-domnpm install babel-loader babel-core babel-preset-es2015 babel-preset-react --sava-dev

3、webpack.config.js

var webpack = require('webpack');var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');  module.exports = {     //插件项      plugins:[commonsPlugin],     //页面入口文件配置     entry: {         index : './src/js/startup.js'     },    //入口文件输出配置     output:{         path:'./js',         filename: '[name].bundle.js'     },     // externals: {     //排除构建文件外  //        'react': 'React'  //    },     module: {         //加载器配置        loaders:[         {            test: /\.css$/,loader: 'style-loader!css-loader'        },         {              test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'         },         {             test: /\.js$/, loader: 'babel-loader', query:{                 presets:['es2015','react']             }         },         {             test: /\.jsx$/, loader: 'babel-loader!jsx-loader?harmony'         }         ]     },     resolve: { extensions: ['', '.js', '.jsx'] } }

4、entry.js

1 'use strict'; 2 import React from 'react'; 3 import ReactDOM from 'react-dom'; 4 5 class Demo extends React.Component { 6     render(){ 7         return (<div>hello react</div>) 8     } 9 }  10 React.render(<Demo />,document.getElementById("aaa"));

之后每次在修改完代码之后，只要在node命令行中输入 webpack即可编译。

2 0