标签：reack react-router webpack loader
前情提要：最近在学习react，然后就将项目中遇到的bug总结下来，作为借鉴！
项目结构：
demo
|app
|app.js
|main.js
|center.js
|toutiao.js
|quanzi.js
|shipin.js
|dinggou.js
|style.css
|build
|index.html
|.babelrc
|package.json
|node_modules
|webpack.config.js
html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="box"> </div> <script src="http://localhost:8080/webpack-dev-server.js"></script> <script src="app.js"></script> <script src="main.js"></script> </body> </html>
app.js、main.js、center.js、toutiao.js、quanzi.js、shipin.js、dinggou.js文件如下：
//app.js文件
import React from ‘react‘;
import { Link } from ‘react-router‘;
import Jquery from "./jquery.js";
import styles from "./style.css";
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1> 欢迎访问主界面 </h1>
<div className="showBox">
{
this.props.children
}
</div>
<ul>
<li><Link to="/center" activeStyle={{background:"blue"}} >用户中心 </Link></li>
<li><Link to="/quanzi" className="danger" > 圈子 </Link></li>
<li><Link to="/shipin" activeStyle={{background:"blue"}}> 视频 </Link></li>
<li><Link to="/toutiao" activeStyle={{background:"blue"}}> 头条 </Link></li>
<li><Link to="/dinggou" activeStyle={{background:"blue"}}> 订购 </Link></li>
</ul>
</div>
);
}
}
//代替A标签 不需要使用hash值
// this.props.children 指代是每一个 route 嵌套结构下的子组件
export default App//main.js文件
import React, { Component, PropTypes } from ‘react‘;
import ReactDOM,{render} from ‘react-dom‘;
import { Router,Route,hashHistory,Link,browserHistory,IndexRoute,IndexRedirect,Redirect } from ‘react-router‘;
import App from ‘./app.js‘;
import Center from ‘./center.js‘;
import Toutiao from ‘./toutiao.js‘;
import Quanzi from ‘./quanzi.js‘;
import Dinggou from ‘./dinggou.js‘;
import Shipin from ‘./shipin.js‘;
import styles from "./style.css"
//1.主视图
var doc = document.getElementById("box");
render((
<Router history={ browserHistory }>
<Route path="/" component={App}>
<IndexRoute path="/center" component={ Center } /> //设置默认路由
<Route path="/toutiao" component={Toutiao} />
<Route path="/quanzi" component={Quanzi} />
<Route path="/shipin" component={Shipin} />
<Route path="/dinggou" component={Dinggou} />
<IndexRedirect to="/toutiao"> </IndexRedirect>
</Route>
</Router>
),doc)//center.js文件 其他类似
import React from ‘react‘;
class Center extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
个人中心
</div>
);
}
}
export default Centerwebpack.config.js文件
var webpack = require("webpack");
var path = require("path")
module.exports = {
devtool:"eval-source-map",
entry: {
main:["webpack/hot/dev-server",__dirname + "/app/main.js"],
app:["webpack/hot/dev-server",__dirname + "/app/app.js"]
},
output:{
path:__dirname + "/build",
filename:"[name].js" //变量 name 固定的API
},
module:{
loaders:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:"babel-loader" //webpack 2.0 写法 1.0 不写-loader
},
{
test:/\.css$/,
loader:"style-loader!css-loader" //webpack 2.0 写法 1.0 不写-loader
},
{
test:/\.(jpg|png)$/,
loader:"url-loader?limit=8192" //webpack 2.0 写法 1.0 不写-loader 当 图片大小低于8192 会自动转换 base64格式的图片
}
]
},
plugins:[
new webpack.HotModuleReplacementPlugin(), //热替换 热更行 热加载
new webpack.optimize.UglifyJsPlugin(),//压缩JS代码
]
}.babelrc文件：
{
"presets":["es2015","react"]
}package.json文件：
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --progress --colors --content-base ./build --history-api-fallback"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"json-loader": "^0.5.4",
"react": "^15.5.3",
"react-dom": "^15.5.3",
"react-router": "^2.8.1",
"style-loader": "^0.16.1",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"json-loader": "^0.5.4",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^2.8.1",
"resolve-url-loader": "^2.0.2",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
}
}安装的插件
cnpm i -S webpack react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react react-router@2 css-loader style-loader file-loader
遇到的bug
本文出自 “小Q博客” 博客，谢绝转载！
标签：reack react-router webpack loader
原文地址：http://12762787.blog.51cto.com/12752787/1915604
