react+webpack开发环境搭建

###Webpack配置
####目录结构
--your project
|--app
|--components
|--productBox.jsx
|--main.js
|--build
|--index.html
|--bundle.js(该文件是webpack打包后生成的)

####初始化,会直接创建package.json文件
npm init
####安装webpack及react相关依赖包
npm install react react-dom react-router react-kendo react-hot-loader react-transform-hmr --save-dev
npm install webpack webpack-dev-server --save-dev
npm install babel-core babel-loader babel-plugin-react-transform babel-preset-es2015 babel-preset-react --save-dev
npm install css-loader less less-loader graceful html-webpack-plugin lodash recluster --save-dev

####package.json
{
"name": "group",
"version": "1.0.0",
"description": "group app framework",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
},
"repository": {
"type": "git",
"url": ".."
},
"keywords": [
"react",
"webpack"
],
"author": "yixuan",
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.5",
"babel-plugin-react-transform": "^2.0.2",
"css-loader": "^0.23.1",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"react-hot-loader": "^1.3.0",
"react-transform-hmr": "^1.0.4",
"webpack": "^1.12.11",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"graceful": "^1.0.1",
"html-webpack-plugin": "^2.22.0",
"lodash": "^3.10.1",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-kendo": "^0.13.11",
"react-router": "^2.0.0",
"recluster": "^0.3.7"
}
}
####webpack.config.js
var webpack = require('webpack');

module.exports = {
entry: [
'webpack/hot/only-dev-server',
"./app/main.js"
],
output: {
path: './build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.js$/,exclude: /node_modules/,loader: 'babel-loader'},
{ test: /.css$/,loader: "style!css" },
{test: /.less/,loader: 'style-loader!css-loader!less-loader'},
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets:['react','es2015']
}
}
]
},
resolve:{
extensions:['','.js','.json']
},
devServer: {
hot: true,
inline: true
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};

####打包bundle.js
webpack

####运行webpack-dev-server

npm start
打开浏览器输入http://127.0.0.1:8080/webpack-dev-server

参考网址：http://www.jianshu.com/p/418e48e0cef1

https://github.com/zhangmengxue/React-Learning

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!