最近研究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() ] };
代码地址:点这里css