web999_Z

因为项目里一个更换皮肤的功能，虽然antd官网给出了更改主题的方法，但那是静态的，没办法在线上更换，然后发现网上在这方面的资料也并不多，这个业务难道不是应该很普遍吗？然后我就花了一些时间去解决了这个问题，并将踩过的坑写出来，再给出解决方案。 这个工具是我在网上找到的。下面是这个…

先来说一下，可能有些人会说怎么这么快就结尾了？其实全部的重构肯定是还没完成的，这里说的结尾是前期的配置已经基本完成了。本来还想写一个webpack打包速度的博文，但是发现打包速度的优化可以写的并不多（也可能是我孤陋寡闻...），下面大概写一下。 webpack本来是单线程的去打…

这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 可以清晰的看到antd和react-dom就占了一半多，下面来优化。 1. 修改mode 2.…

我们现在的配置都是写在一个webpack.config.js文件夹里，但是实际上，我们在开发环境和生产环境中使用的配置是不一样的，比如生产环境中我们需要包的体积不能很大，不然在线上响应会变慢。所以我们需要将生产环境和开发环境分开来。 在node里，我们有一个process对象，…

这章我们来讲怎么配置react和react-router。 因为项目中需要使用到antd，所以我们先引入antd先。这里有一点要说一下，antd v3.9.0之后在打包时会有一个icons的包非常大，而且目前并没有很好的解决办法，所以我们使用的是3.8.2版的。 打开浏览器预览…

这章我们先把一些css和img给配置了，还有热加载的一些插件。 首先我们先配置控制台的命令，我们每次打包的时候都需要执行webpack这条命令，然后在打包后的文件夹里打开index.html进行预览，我们能不能直接在修改的时候直接在网页上预览呢？当然可以，下面开始配置。 发现浏…

这个时候打包运行代码，在谷歌下可以正常运行，这是因为谷歌本身就支持这样的语法，但是在IE下会报这样的错（万恶的IE），所以我们要使用polyfill来转化它。 然后我们再去控制台里执行webpack，我们发现打包后的体积突然变得这么大？之前明明只有几kb的。这是因为polyfi…

现在开始创建项目了，安装node什么的一大堆我就不说了，网上很多，我这里使用的是node版本v10.15.0，yarn的版本是v1.12.3。 我这里使用的版本是webpack4.29.0，然后在目录下创建webpack.config.js这个文件，在根目录下创建src文件夹p…