最近研究facebook的React框架,结果发现很多文章和教程都是老的0.13版本的,而新的react多了个ReactDOM跟原来略有区别,经过多次测试和修改,终于搭建成功。为了支持es6开发,自己研究出了一个简单的webpack配置,放在这,方便自己记忆,也让新手少走弯路。
首先建立 package.json 配置,通过 npm install 安装。
{
"private": true,
"scripts": {
"dev": "webpack-dev-server --colors --inline --hot"
},
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"css-loader": "^0.22.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.3",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"react": "^0.14.2",
"react-dom": "^0.14.2"
}
然后建立 webpack.config.js,这个建立好,就可以用 npm run dev 来启动测试服务,支持热更新,来爽快的开发了。
var webpack = require('webpack');
module.exports = {
entry: [
"./js/app.js"
],
output: {
path: './build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel?presets[]=es2015&presets[]=react'},
{ test: /\.css$/, loader: "style!css" }
]
},
resolve:{
extensions:['','.js','.json']
},
plugins: [
new webpack.NoErrorsPlugin()
]
};
代码地址:点这里