全新webpack2、react16、react-router4架构,喜欢折腾的别错过

#1

折腾到大半夜,项目终于升级成功了。(源码地址在最下面,往下看。。)

webpack2在一些细节上的变化导致不能使用webpack1的配置模式,我参考了github上一个demo之后结合自己的第一个react项目版本的项目做了升级。

react、react-dom、react-redux统统全面升级版本。

react-router也升级到了最新版4.0.0,API发生了较大的变化,路由结构也做了调整,最新版router支持更多强大的功能 react-router4官方教程

下面的代码是截取本项目的一段router。

export default (
<HashRouter>
    <App>
        <Match exactly pattern="/" component={Home} />
        <Match pattern="/search" component={Search} />
                {/*在这里添加你的Route*/}
    </App>
</HashRouter>

再来看看webpack2的一段配置

module: {
rules: [
  {
    test: /\.css$/,
    exclude: /node_modules/,
    use: ['style-loader', 'css-loader']
  },
  {
    test:   /\.less$/,
    use: ['style-loader', "css-loader", "less-loader"]
  },
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader'],
  }
],
}

webpack2—react-router4项目地址https://github.com/hyy1115/react-redux-webpack2 :laughing:

过几天有时间的话会写几篇博客总结一下webpack2和react-router4的配置方法,现在国内也有介绍这些的博客,百度也能搜索到。

3 Likes
#2

nb

#3

你为何如此屌…

#4

厉害了我的锅

#5

不过react-router 4 还没有正式版之前还是玩3,毕竟api 变化这么大。 如果正式版再变那不是折腾自己吗.

#6

比别人早一点折腾没有坏处(工作不忙的时候),V4的几个主要API已经确定好了,核心概念也确定了。没有大bug,但是理念变了。

可以预见V4将是一个转折点。

all router is component
#7

你是怎么部署react 项目到阿里云或者上线了。 能否给个配置看下。 不会部署.

#8

打包成静态文件,放到cdn加速,配置是服务端的事情

#9

3才学会啊。。。。。我的哥

#10

缺少redux

#11

你再认真看看是不是没有redux

#12

点击报错Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

#13

看来得普及一下基本英语单词了:

Warning是警告的意思,不是错误,错误的单词是error。

以前也遇到过好几个人不能区分error和Warning。

出现这个“警告”是因为在nav的点击事件中,执行了this.props.history.push(’/’)。

而当前路由就是 / ,hash history不允许push和当前路由相同的路由,你完全可以忽视它,你只要把homeContainer里面的this.props.history.push(’/’)注释掉,或者改成其他路由,就可以解决这个Warning了。

#14

Router 4.x 的 核心 和 API 已经确认定稿了… 就是跟 3.x有很大变化 。 早日升级 4.x吧 (React 官方之前一直对 Router 3.x版本 很不满意。 现在 4.x 才是他们喜欢的风格… 支持动态)

#15

官方满意不代表100%适用所有场景,技术选型还是得看自己对项目的判断和把握。

#16

you are so diao

#17

我在这里这么写为什么子路由接受不到props