1.webpack.config.js
var webpack = require('webpack');
var path = require('path');
//自动生成html模板
var HtmlWebpackPlugin = require("html-webpack-plugin");
//自动清除生成的js文件中重复的文件，如bundle.js?sdfdsf 和 bundle.js?kgksk 会清除上次打包的文件
var CleanWebpackPlugin = require("clean-webpack-plugin");
//提取公共的css样式文件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ASSET_PATH = process.env.ASSET_PATH || '/';
var API = {
test: 'http://test.api.xx.com',
production: 'http://api.xx.com',
development: 'http://dev.api.xx.com'
};
var environment = "devolopment";//或者是devolopment，product
module.exports = {
// entry: [
// "webpack/hot/only-dev-server","./src/js/Home.js"
// ],
entry:{
index: './src/js/home/home.js',
vendor1: ['react', 'react-dom'],
vendor2: [ 'react-router', 'redux', 'react-redux', 'antd']
},
output: {
path: path.resolve(__dirname, 'build'),
filename: environment === "product" ? '[name].[chunkhash].js': '[name].js',
// 如果配置改文件，引入文件就需要写成<script src="www.baidu.com/bundle"></script>
publicPath: 'www.baidu.com',
},
module: {
loaders: [
{ test: /\.js?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] }},
{ test: /\.css$/, loader: ExtractTextPlugin.extract( "css-loader", "postcss-loader" )},
{ test: /\.less$/, loader: ExtractTextPlugin.extract( "css-loader","less-loader" )}
]
},
resolve: {
extensions: ['.js', '.jsx','.json','.less','.css'],//这是省略后缀名的文件
},
plugins: [
//css抽取,如果后缀用chunkhash，会造成和js的指纹一样，contenthash代表的是文本文件内容的hash值，也就是只有style文件的hash值
new ExtractTextPlugin({
filename: (getPath) => {
return getPath(environment === "product" ? 'css/[name].[contenthash].css' : 'css/[name].css' ).replace('css/js', 'css');
},
allChunks: true
}),
//压缩js
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
//设置全局变量，在其他模块直接console.log(_DEV_) ====== 15 也可以用来配置线上和日常环境
new webpack.DefinePlugin({
_DEV_: 'zhangzhen',
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
}),
new HtmlWebpackPlugin({
title: "redux",
// hash: true,
showErrors: true,
template: './index.html'
}),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor2','vendor1'],
minChunks: Infinity
}),
environment === "product" ? new CleanWebpackPlugin(
['build/*.js', 'build/css/*.css'], //匹配删除的文件
{
root: __dirname, //根目录
verbose: true, //开启在控制台输出信息
dry: false //启用删除文件
}
) : new webpack.HotModuleReplacementPlugin() ,
new webpack.NoEmitOnErrorsPlugin(),
],
devtool: 'eval-source-map'
};
2.router
import React from 'react';
import { Router, Route, IndexRoute, hashHistory} from 'react-router';
import Pattern from '../pattern/index';
import Pattern1 from '../pattern/pattern1/index';
import Pattern2 from '../pattern/pattern2/index';
import Nav from '../pattern/pattern1/component/nav';
import App1 from '../pattern/pattern1/component/app1';
import App2 from '../pattern/pattern1/component/app2';
import App3 from '../pattern/pattern1/component/app3';
import App4 from '../pattern/pattern1/component/app4';
export default class AppRouter extends React.Component{
render () {
return (
<Router history = { hashHistory }>
<Route path="/" component = { Pattern }>
<IndexRoute component = { Pattern1 } />
<Route path="/pattern1" component = { Nav }>
<Route path="/pattern1/app1" component = { App1 }></Route>
<Route path="/pattern1/app2" component = { App2 }></Route>
<Route path="/pattern1/app3" component = { App3 }></Route>
<Route path="/pattern1/app4" component = { App4 }></Route>
</Route>
<Route path="/pattern2" component = { Pattern2 }></Route>
</Route>
</Router>
)
}
}
3.nav.js
import React from 'react';
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
export default class Nav extends React.Component{
constructor (props) {
super(props);
this.state = {
current: 'mail',
}
}
handleClick (e) {
window.location.hash = "/pattern1/" + e.key;
this.setState({
current: e.key,
});
}
render () {
return (
<div>
<Menu
onClick={this.handleClick.bind(this)}
selectedKeys={[this.state.current]}
mode="horizontal">
<Menu.Item key="app1">
<Icon type="mail" />Navigation One
</Menu.Item>
<Menu.Item key="app2">
<Icon type="appstore" />Navigation Two
</Menu.Item>
<Menu.Item key="app3">
<Icon type="mobile" />Navigation Two
</Menu.Item>
<Menu.Item key="app4">
<Icon type="share-alt" />Navigation Two
</Menu.Item>
</Menu>
{ this.props.children }
</div>
)
}
}