react安装和使用--webpack

来源:互联网 发布:淘宝集市店 编辑:程序博客网 时间:2024/06/05 15:23

初始化项目

npm init

通过npm安装

npm install --save react react-dom babelify babel-preset-reactnpm install --save babel-preset-es2015

第一个react

var Rect = require('react');var ReactDOM = require('react-dom');ReactDOM.render(    <h1>Hello World!!!!</h1>,    document.getElementById("example"));

webpack安装

npm install webpack -g   //全局安装npm install webpack-dev-server -g  //全局安装npm install webpacknpm install webpack-dev-servernpm install babel-loader //不安装webpack执行报错

webpack配置文件(webpack.config.js)

var webpack = require('webpack');var path = require('path');module.exports = {    context: __dirname + '/src',    entry: "./js/index.js",    module: {        loaders: [{            test: /\.js?$/,            exclude: /(node_modules)/,            loader: 'babel-loader',            query: {                presets: ['react', 'es2015']            }        }]    },    output: {        path: __dirname + "/src/",        filename: "bundle.js"    }};

webpack使用

执行 webpack监听 webpack --watch
原创粉丝点击