webpack学习（五）—webpack+react+es6（第1篇）
如果你看过webpack学习系列的前一个文章，接下来做的东西会比较简单 ：webpack学习（四）— webpack-dev-server
react发展的很快，现在大部分开发react相关的项目，都会用到这个组合：webpack+react+es6
还是以一个项目举例，项目中的package.json是生成的，"devDependencies"都是自己手动安装加入，如果拷贝网上的资料，已存在package.json文件且内容完整，可以npm install直接安装所需要的插件。
第一次接触，为了一探react的具体开发流程，还是自己一个个安装比较好。
如果你在看本文，请按照以下步骤操作即可：
项目目录：
package.json
{
"name": "pro4",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --inline --hot --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.26.0",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-hot-loader": "^3.0.0-beta.6",
"style-loader": "^0.13.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="content"></div> <script src="build/bundle.js"></script> </body> </html>
webpack.config.js
var path = require("path");
module.exports = {
entry:[
'./src/js/app.js'
],
output: {
path: path.resolve('./', "dist"),
publicPath: "build",
filename: "bundle.js"
},
module: {
loaders: [
{test: /\.js?$/, exclude: /node_modules/, loaders: [ 'babel?presets[]=react,presets[]=es2015' ] },
{ test: /\.css$/, loader: 'style!css'}
]
},
resolve:{
extensions:['','.js','.json']
},
};
src/js/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Helloworld from './helloworld';
// ReactDOM.render
// (<Helloword/>,document.getElementById('content');
// );
ReactDOM.render
(
<Helloworld/>,
document.getElementById('content')
);
src/js/helloword.js
import React from 'react';
import ReactDOM from 'react-dom';
class Helloworld extends React.Component{
constructor(props) {
super(props);
}
render(){
return(<h1>Hello World！！！！！！</h1>)
}
}
module.exports = Helloworld
至此，项目结构，文件都已完成
安装: npm init
启动：npm run dev
项目地址：http://localhost:8080/index.html
说明：
1）本文例子中package.json包含的 "devDependencies"项，是webpack+react+es6开发的最少的安装。本例热加载，修改任何一个src/js下的js文件，保存，浏览器自动更新。
2）本文例子并没有安装react-hot-loader，原因是直接安装，目前版本一到3.0以上，并不支持在webpack.config.js中这么书写：
{test: /\.js?$/, exclude: /node_modules/, loaders: ['react-hot','babel-loader?presets[]=react,presets[]=es2015'] },
如果写了，webpack-dev-server会报错：
Module build failed: Error: React Hot Loader: The Webpack loader is now exported separately
但是，用低版本的react-hot-loader不会报错。
而且你会发现，现在不用react-hot-loader，也可以热加载。
3）js的加载器：
{test: /\.js?$/, exclude: /node_modules/, loaders: [ 'babel?presets[]=react,presets[]=es2015' ] },
这里很重要，先用babel-loader将es6(es2015),react的语法（jsx）转换为目前浏览器普遍支持的语法，即es5。
如果这里配置出错，或者没有安装除了babel外的2个loader，会报错
Module build failed: SyntaxError: Unexpected token
因为你在return里写的HTML标签不识别（不是字符串）。
4)如果要兼容老版本浏览器，支持es3语法。还需要用es3ify-loader。本例没有用。
5）如果你想输出文件，执行webpack -p即可生成dist目录下的bundle.js文件。再建个html文件，引入bundle.js。即可看到helloworld！！！！。这就是我们发布的js，html。
6）本例没有对html文件进行处理。上一步会显得别扭。这个后续慢慢探索吧。。。
7）ES6的最直接体现是我们创建组件的时候，用class而不是React.creatClass这个方法了。此外，import也是ES6新加入的，用于引入模块。
