webpack学习—webpack+react+es6
Posted 小虫虫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack学习—webpack+react+es6相关的知识，希望对你有一定的参考价值。
如果你看过webpack学习系列的前一个文章，接下来做的东西会比较简单 ：webpack学习（四）— webpack-dev-server
react发展的很快，现在大部分开发react相关的项目，都会用到这个组合：webpack+react+es6
还是以一个项目举例，项目中的package.json是生成的，"devDependencies"都是自己安装加入，如果拷贝网上的资料，可以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。本例没有用。
以上是关于webpack学习—webpack+react+es6的主要内容，如果未能解决你的问题，请参考以下文章