使用DefinePlugin改变打包流程
前言 基于webpack开发的时候，我们有些代码只需要在开发时期来运行，例如打印详细的错误或警告信息。 有些代码我们需要在线上运行的时候在执行。例如数据埋点，如果在开发的时候就运行，会导致线上埋点的结果不是很准确，失去了分析的意义。 实现 今日我通过查看部分库的源代码，里面用到了webpack的 DefinePlugin，这个插件可以定义一个webpack打包时的全局变量，在我们的代码中可以通过判…
React-Router4升级之路
最近将React升级到了16.2，也将项目的React-Router升级了v4，我主要说一下我的升级之路。 React 16 新特性 1、render支持了多种的返回类型，例如数组和代码片段等； 2、更好的错误处理，新增componentDidCatch钩子 ； 3、支持自定义DOM属性，属性会透传； 4、体积更小（比15减少了32%），删除了内置的类型检查React.PropTypes； 5、P…
Nginx反向代理并支持解析php
前言 接口联调时，有一些场景，我们需要给本地的服务（webpack,gulp等启动的服务）使用域名访问，例如： 1、第三方登录回调地址不支持localhost2、使用cookie作为认证的接口 我们需要修改本地的hosts文件，将能跨域访问的域名指向我们的服务。 对于同一个业务的多个项目，所以我们启动服务器的时候一般会从80端口上运行才能保证访问的时候不加端口。如果我们使用webpack-dev-…
swiper常见使用以及问题整理
swiper中文API：https://www.swiper.com.cn/api/index.html 1、实现下面的布局(主要看左右两边的) 上面的例子看出，中间部分居中在页面水平中央，两边显示一小部分,下面是关键代码： const newsSwiper = new Swiper('#newsSwiper', { // 循环展示 loop: true, // 一秒钟换一次 number: 10…
webpack4升级指南
因为webpack4有很多吸引人的特性，在开发的时候能能提高效率，所以将团队项目的webpack3升级到了webpack4； 新特性 对Node.js版本必须>=8.9.4； 支持WebAssembly； 支持多种模块类型； 通过mode来处理开发环境和线上环境优化； 更简单配置的拆包功能； 更快的热加载功能； 零配置模块打包（output:./dist/main.js；entry:./sr…
Webpack输出资源内容到html文件
需求来源 对于小的项目或者单文件的网页，我们将css文件和js文件可以直接内联插入到html中，可以实现单文件部署（使用场景：例如在一些可视化编辑器上直接粘贴生成的html代码就可以运行了）；当然比较大的项目我们可以注入一些公共的样式和js文件的到html中； 我们使用html-webpack-plugin的插件 https://github.com/DustinJackson/html-webp…
Web页面图片预加载方案
现象 在开发活动时，有一个转盘抽奖的功能，要求抽到每个奖项的时候显示不同的图片，我们内心是这样想的； 然而现实却是这样，图片去哪里了啊，原来是图片比较大（之前没有做优化）加载比较慢，所以我们看到了文本，但是没有看到背景。 因为红包组件是动态替换背景图片的，所以图片没有缓存时，都需要立即发请求，所以就导致了加载慢的问题； 示例代码： <div className={'redpack-…