React+webpack开发环境配置

1.创建项目文件夹

 npm init --yes

2.安装webpack，webpack-dev-server和ｗｅｂｐａｃｋ－ｃｌｉ

 npm install webpack webpack-dev-server webpack-cli -save-dev

3.安装babel-core核心模块和babel-loader

npm install babel-core babel-loader＠７ --save-dev

4.安装ES6和React支持

npm install babel-preset-es2015 babel-preset-react --save-dev

5.配置.babelrc文件

touch .babelrc

//告诉babel，编译JavaScript代码的时候用这两个presets编译

{

“presets”: [“es2015”,”react”]

}

 

注：本次开发环境搭建暂不考虑ESLint

6.安装一个webpack插件，html-webpack-plugin,它能帮助我们自动生成HTML页面，并且引入正确的JavaScript文件依赖。

npm install html-webpack-plugin --save-dev

7.创建webpack.config.js文件，并进行相关配置

touch webpack.config.js

var path = require('path');

var webpack = require('webpack');

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

//一些常用路径

var ROOT_PATH = path.resolve(__dirname);

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

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

 

module.exports = {

entry:{

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

},

output:{

path: BUILD_PATH,

filename:'bundle.js'

},

//开启dev source map

devtool:'eval-source-map',

//开启webpack dev server

devServer:{

historyApiFallback: true,

hot: true,

inline: true,

progress: true

},

mode:"development",

module: {

rules: [

{

test: /\.jsx?$/,

loaders: 'babel-loader',

include: APP_PATH,

// query:{

// presets: ['es2015','react']

// }

}

],

 

},

plugins: [

new HtmlwebpackPlugin({

title:'My first react app'

})

],

resolve:{

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

}

}

 8.在ｐａｃｋａｇｅ．ｊｓｏｎ中添加ｗｅｂｐａｃｋ启动命令

"build": "webpack",

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

9. 添加ｒｅａｃｔ库

npm install react react-dom --save

10.新建ａｐｐ．ｊｓｘ文件用于测试

在根目录下创建ａｐｐ文件夹，并在文件夹中创建ａｐｐ．Ｊｓｘ

import React from "react";

import ReactDOM from "react-dom";

 

function App(){

return(

<div className="container">

<h1>Hello React!emmmmmmm1111111111</h1>

<h1>Hello React!eeeemmmmmmm</h1>

</div>

);

}

 

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

document.body.appendChild(app);

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

至此开发环境基本配置完成。

不过为了在开发复杂项目时能快速更新页面，我们添加组件热加载功能 

 11.添加组件热加载（ＨＭＲ）功能

npm install babel-preset-react-hmre --save-dev

配置．ｂａｂｅｌｒｃ文件

{

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

"env": {

"development": {

"presets": ["react-hmre"]

}

}

}

 

其他注意事项：

npm run dev 运行本地服务器，运行后，在浏览器中输入localhost:8080即可看到页面

按下Ctrl + C停止运行

npm run build 构建项目