一直想要搭一个简单的react开发环境,看了很多文章还是一头雾水,但最后还是搭了一个算是能正常工作的开发环境吧,记录一下,以防以后忘记。一些必备的安装就不说了,其实主要是package.json和webpack文件的配置。
必备的工具,node、npm、git就不多说了。
首先目录结构如下:
build
…
src
…
package.json
webpack.config.js
build是文件打包之后的文件和index.html文件,src是要打包编译的源文件, package.json、 webpack.config.js是两个配置文件。
1.package.json文件
{
"name": "react_todo",
"version": "1.0.0",
"description": " react study",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.13.3",
"react-dom": "^15.3.2",
"sass": "",
"react-router": "^2.0.0",
"webpack-dev-server": "^1.16.2"
},
"devDependencies": {
"babel-core": "^5.5.8",
"babel-loader": "^5.1.4",
"css-loader": "^0.14.5",
"file-loader": "^0.8.4",
"jsx-loader": "^0.13.2",
"node-libs-browser": "^0.5.2",
"sass-loader": "^1.0.2",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"webpack": "^1.9.11"
}
}
具体每个字段作用可以自行搜索,然后运行npm install 引入依赖包,建议安装cnpm,速度快多了,然后就会多个node_modules文件。
2.然后加入index.html文件和入口文件main.js,并配置webpack.config.js文件
“`
var path = require(‘path’);
module.exports = {
entry:[
‘webpack/hot/dev-server’,
‘webpack-dev-server/client?http://localhost:8080‘,
‘./src/main.js’
],
output: {
path: path.resolve(__dirname, ‘build’),
filename: ‘bundle.js’,
},
module:{
loaders:[
{
test:/.jsx?/,
loader:”babel”
},
{
test:/.css/,
loader:”style ! sass”
}
]
}
};
具体字段作用自行搜索,入口文件为’./src/main.js’,打包后到”./build/bundle.js”,现在文件目录为:
build
index.html
src
App
…
main.js
package.json
webpack.config.js
`
###运行npm run build 即webpack打包,然后build中会多一个bundle.js文件,在index中引入。再运行npm run dev,就开启了一个服务器,在浏览器中输入localhost:8080,则会出现结果,同时还能支持热加载,即文件改变后会自动编译,浏览器也会自动刷新。