npm+webpack+babel+react安装
1.首先要安装 Node.js， Node.js 自带了软件包管理器 npm
2.在项目文件目录下生成package.json
# 进入项目目录$ npm init
3.用 npm 安装 Webpack
$ npm install webpack -g
此时 Webpack 已经安装到了全局环境下，通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。
# 进入项目目录# 安装 webpack 依赖:
$ npm install webpack --save-dev
4.用 npm 安装 模块加载器(loader)
$ npm install style-loader css-loader -g
将 style-loader css-loader 安装到项目的依赖中
# 进入项目目录# 安装 style-loader css-loader 依赖:
$ npm install style-loader css-loader --save-dev
5.用 npm 安装 html-webpack-plugin
# 进入项目目录# 安装 html-webpack-plugin 依赖:
$ npm install html-webpack-plugin --save-dev
6.用 npm 安装 webpack-dev-server
# 进入项目目录# 安装 webpack-dev-server 依赖:
$ npm install webpack-dev-server --save-dev
7.用 npm 安装 babel-cli: babel转码器
$ npm install babel-cli -g
# 进入项目目录# 安装 babel-cli 依赖:
$ npm install babel-cli --save-dev
8.用 npm 安装 babel-preset-es2015
$ npm install babel-preset-es2015 -g
# 进入项目目录# 安装 babel-preset-es2015 依赖:
$ npm install babel-preset-es2015 --save-dev
9.用 npm 安装 babel-loader
# 进入项目目录# 安装 babel-loader 依赖:
$ npm install babel-loader --save-dev
10.用 npm 安装 react
$ npm install react react-dom babel-preset-react -g
# 进入项目目录# 安装 react 依赖:
$ npm install react react-dom babel-preset-react --save-dev
11.用 npm 安装 react-hot-loader
# 进入项目目录# 安装 react-hot-loader 依赖:
$ npm install react-hot-loader --save-dev
11.在项目文件目录下创建.babelrc文件
{"preset":["es2015"],"react"}
12.在项目文件目录下创建example文件夹,并在其下面创建如下文件
index.jsx：
var React = require("react");var ReactDOM = require("react-dom");
import App from './app.jsx';
var Hello = React.createClass({
render:function(){
return <div>1234<App/></div>
}
});
var div1 = document.createElement("div");
document.body.appendChild(div1);
ReactDOM.render(<Hello />,div1);
app.jsx:
var React = require("react");var ReactDOM = require("react-dom");
export default class App extends React.Component{
render(){
return <h1>hello reactJs</h1>
}
}
13.在项目文件目录下建立webpack.config.js
var htmlWebpackPlugin = require('html-webpack-plugin'); //使用自动生成html文件的一个插件var path = require('path');
module.exports = {
entry: './example/index.jsx',
output:{
path:'./example_build/',
filename:'build.js'
},
module:{
loaders:[
{
test:/\.css$/,
loaders:['style','css'],
exclude:'node_modules'
},
{
test:/\.jsx?$/,
loaders:['react-hot','babel?presets[]=es2015&presets[]=react'],
exclude:"/node_modules/",
include:path.resolve(__dirname,"example")
}
] },
resolve:{
extensions:['','.js','.css','.jsx'] },
devServer: {
hot:true,
inline:true
},
plugins:[
new htmlWebpackPlugin({
title:"First react app"
})
]}
14.webpack打包
# 进入项目目录$ webpack
此时项目目录下将会生成example_build文件夹，其内部也生成build.js 和 index.html文件，
15.webpack-dev-server 热加载
# 进入项目目录$ webpack-dev-server --hot --inline
此时在浏览器中打开http://localhost:8080/，将会看到example_build下index.html页面内容。
这时，修改example下的index.jsx内容，页面将会自动刷新；修改exampleg下的app.js内容，页面将会局部刷新。