Webpack打包React踩到的坑

  学习React断断续续地也有两三周了,期间接触到了一大堆名词和工具,不得不承认React生态圈实在是太繁荣了,作为还没毕业的学生,本应该沉下心来多看看基础课程、刷一刷面试题好在秋招找一份不错的工作,但是一想到还有那么多好玩的框架没有学过,好用的工具没有用过,就心里直痒痒~

  刚刚解决了困扰了我好一段时间的问题,在网上查了好多资料都没找到,趁着中午休息时间记录下来吧。

  需求:公司项目使用APICloud将前端代码打包成原生应用,并使用React将应用组件化  

  问题:如何在本地直接打开html呈现React页面?

  下面简单介绍一下产生这个问题的源头:

  初学React时因为代码量较小,而且重点在学习语法,所以组件都是写在index.html里内联的script标签里,在<head>里使用browser.js将jsx语法转换为js,这样显然不利于模块化和复用,并且所有的组件内部都呈现在主页,很丑陋。

  那怎么解决呢?首先想到的是将组件代码以<script type="text/babel" src="xx.jsx" />的方式引入,但是在chrome下browser.js报跨域错,据说改下chrome的跨域配置或换用Firefox可以正常运行,但因为不是解决问题本身,没有太大意义,就没有尝试。  

  在知乎中看到有人回答类似问题,说这不是React正确的打开姿势,要在本地起一个服务器,将项目部署到React上即可。于是接触到了webpack,不得不说webpack很全能,也很强大,从css预处理,到js混淆,图片引用,只要配置得当,它全能帮你做好,这里webpack的配置文件等推荐使用Yeoman的generator-react-webpack自动生成,当初不知道这些工具,查文档一项一项调试真是吐血。。。总算配好了环境,可以开始愉快地开发了,所有的components自成文件,在需要的时候引入即可,各种依赖由webpack帮你完成,npm start 自动起一台支持热插拔、自动刷新的服务器,加上React-router以后也算个像模像样的SPA了。

  然而……项目中的前端部分要作为静态资源打包到APICloud,这就意味着在浏览器环境下(无服务器)的情况下,双击index.html要能呈现出和webpack-dev-server一样的效果,有了初学时的思维定式,这个问题一下子难住了我(其实现在想想好简单哦),用过webpack-dev-server的同学应该都知道,webpack热部署的原理是将index.html中引用的本地文件的路径替换为存放在内存中的实时编译的bundle.js文件,每当源文件发生改变,就重新编译改变的部分并重新加载到内存中。想要将项目本地化,首先就是将bundle.js写入文件系统(在generator-react-webpack生成的项目的默认配置下),命令如下

npm run --dev=dist

这时,所有的源文件以及依赖会被编译并存放到dist目录下,打开dist/index.html,竟然啥也没有!!!一夜回到解放前,打开chrome元素面板,<div id="app"></div>里啥也没,我晕,打开编译+混淆后的bundle.js看了十几分钟,在入口处console.log几句话也都打出来了,就是render函数没效果,难道真的像知友说的那样打开姿势不对?React不能在本地跑?我才不信,回到webpack配置文件,去掉UglifyJsPlugin插件,重新编译,再看编译+未混淆的代码

_reactDom2.default.render(_react2.default.createElement(
        _reactRouter.Router,
        { history: _reactRouter.browserHistory },
        _react2.default.createElement(
            _reactRouter.Route,
            { path: ‘/‘, component: _Main2.default },
            _react2.default.createElement(_reactRouter.IndexRoute, { component: _LoginPage2.default }),
            _react2.default.createElement(_reactRouter.Route, { path: ‘login‘, component: _LoginPage2.default }),
            _react2.default.createElement(
                _reactRouter.Route,
                { onEnter: requireLogin, path: ‘student‘, component: _Student2.default },
                _react2.default.createElement(_reactRouter.IndexRoute, { component: _Info2.default }),
                _react2.default.createElement(_reactRouter.Route, { path: ‘books‘, component: _BookList2.default })
            ),
            _react2.default.createElement(
                _reactRouter.Route,
                { path: ‘admin‘, component: _Admin2.default },
                _react2.default.createElement(_reactRouter.IndexRoute, { component: _Info2.default }),
                _react2.default.createElement(_reactRouter.Route, { path: ‘books‘, component: _BookList2.default })
            )
        )
    ), document.getElementById(‘app‘));

噗。。一眼就看到了browserHistory,原来绕了一大圈子,还是服务器的锅,原来,我的项目使用了browserHistory做路由的history,而browserHistory本身就是依赖服务器的,如果要在本地跑,换成hashHistory应该就好了,重新编译,测试,通过,这下子,终于可以专心学习React本身了!

时间: 2024-11-06 18:10:38

Webpack打包React踩到的坑的相关文章

node.js学习之webpack打包react最简单用法

研究一天多也没弄出来个毛,今天早上来到随便一试,嘿,结果成了.最简洁最简单的使用方法,记录下来. 首先,安装webpack命令: $ npm install webpack -g 全局安装,可以在cmd中使用webpack命令. 然后创建一个项目,项目名称webpack,我这里用的是webstorm11.创建成功之后cmd进入项目根目录,执行命令: $ npm init 这个命令会创建一个package.json的文件,是整个项目的配置文件,添加上webpack的依赖包: "devDepende

webpack打包react,防止打包文件过大

生产环境下关闭source-map功能 -- devtool: false 排除react包引用,适用CDN文件: externals: { 'react': 'React', 'react-dom': "ReactDOM", 'react-router': 'ReactRouter' }

Webpack打包进阶

说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码分包.异步模块加载特性.看看它们又是如何对PC部落的性能起到进一步的催化作用. 为什么要使用webpack 如果你曾经使用过 Broserify, RequireJS 或类似的打包工具,并注重:代码分包.异步加载.静态资源打包(图片/CSS).那么 webpack 就是帮你构建项目的利器!简单一句话

webpack打包踩坑之TypeError: Cannot read property &#39;bindings&#39; of null

file loader介绍:https://www.webpackjs.com/loaders/file-loader/ babel loader介绍:https://webpack.js.org/loaders/babel-loader/ webpack-dev-server介绍:https://www.webpackjs.com/configuration/dev-server/  ,https://www.jianshu.com/p/73d74445e5c5 今日在学习百度前端学院的一个小

使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项目,然后再去完成. 第一步: 需求 除了上面的基本需求之外,我们还需要实现登录.注册的相关功能,这样可以保证用户的唯一性,并在后台做出记录. 第二步:确定技术栈 express --- 首先,作为前端使用node就可以取代后端java.php开发的工作,对于这个项目是必须的.作为node的框架,ex

[转] 那些在使用webpack时踩过的坑

用webpack的过程,就是一个不断入坑和出坑的过程.回望来时路,一路都是坑啊!现把曾经趟过的那些坑整理出来,各位看官有福了~ 文章末尾有我用到的依赖的版本信息,若你发现某个问题与我在本文中的描述不一致时,可以看看是否版本与我所使用的不同所致. 一.Mac平台和Windows平台的差异导致的问题 1.路径上的差异 在配置entry选项的时候,我这么配置: entry: { main: __dirname + '/src/index.js' } 这样写在Mac下完全没有问题,但在Windows下会

react + antd 实现打印功能(踩了不少坑)

最近在有网页打印需求,尝试了一下react的打印功能,遇到了不少的坑: 1.react本身有一些打印的组件,但都不好用,都是基于window.print(),但是window.print()如果直接打印的话,没有样式.处理直接当前网页的body设置为你要打印的区域,但是当你取消打印的时候你会发现整个网页都被你要打印的区域占满了,你还得用window.reload()重新加载一下页面,用户交互很不好,建议不要采用这种方式. 2.样式的问题,我们可以通过写内联样式解决,尝试了react的react-

解决 webpack 打包文件体积过大

webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境和生产环境用的是同一个 webpack 配置文件,导致生产环境打包的 JS 文件包含了一大堆没必要的插件,比如 HotModuleReplacementPlugin, NoErrorsPlugin... 这时候不管用什么优化方式,都没多大效果.所以,如果你打包后的文件非常大的话,先检查下是不是包含了

webpack,react,babel

window搭建webpack,react,babel傻瓜教程 首先现在的webpack教程已经很多了,写这篇的原因是因为自己在从小白开始的搭建过程中,并没有找到比较好的教程,花费了很多的时间,so 有了这篇博客,方便小白同学学习. node环境在这里不在赘述,package.json文件如下 { "name": "wn", "version": "1.0.0", "description": "