dz45693的专栏

本文讲的图片上传，主要是针对上传头像的。大家都知道，上传头像一般都会分成以下 4 个步骤：选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片接下来，就详细的介绍每个步骤具体实现。选择图片选择图片有什么好讲的呢？不就一个input[type=file]，然后点击就可以了吗？确实是这样的，但是，我们想要做得更加的友好一些，比如需要过滤掉非图片文件， 或只...

前端的构建打包工具很多，比如grunt，gulp。相信这两者大家应该是耳熟能详的，上手相对简单，而且所需手敲的代码都是比较简单的。然后webpack的出现，让这两者打包工具都有点失宠了。webpack比起前两者打包工具，对于前端程序员JS编程能力的要求还是挺高的。不过需要兼容ie8及以下的小伙伴们，就不要考虑webpack了，他很傲娇地不兼容！webpack 前期准备webpack，这是一...

webpack在单页面打包上应用广泛，以create-react-app为首的脚手架众多，单页面打包通常是将业务js，css打包到同一个html文件中，整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口，比如不同的h5活动，或者需要支持seo的官方网站，都需要多个不同的html，webpack-react-multi-page架构让你可以实现多页面架构，在项目开发中保证每个页面...

该项目的github 地址：https://github.com/lewis617/redux-amrc中文文档这个插件将会帮你用更少的代码发起异步 action。通过这个插件你将：不需要再手动编写异步 action 对象。 不需要再手动编写 reducer 来处理异步 action 对象。 获取插件自动生成的 value、error、loaded、loading、loadingN...

前言本文主要从webpack4.x入手，会对平时常用的Webpack配置一一讲解，各个功能点都有对应的详细例子，所以本文也比较长，但如果你能动手跟着本文中的例子完整写一次，相信你会觉得Webpack也不过如此。 一、什么是webpack，为什么使用它？ 1.1 什么是webpack？简单来说，它其实就是一个模块打包器。1.2 为什么使用它？如果像以前开发时一个ht...

原文链接：https://www.jianshu.com/p/f931f47cbf75前言： 作为一个现代javascript 应用程序的静态模块打包器，webpack能将各种资源，如js，css， 图片等作为模块来处理，是当下前端工程化的一个很受欢迎的工具，webpack目前最新的版本是4.0，文章将在4.0 的基础上，从使用者的角度，一步步教你认识并搭建一个简单的webpack配置项目，...

关于Devtool该选项控制是否以及如何生成源映射。官网上给出的可选值有：其中一些值适合开发，一些用于生产。对于开发，您通常需要快速的Source Maps，以bundle的大小为代价，但是对于生产，您需要独立的Source Maps，这是精确的，并且支持最小化。选择一种源映射样式，以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以使用Sourc...

处理css中的图片资源时，我们常用的两种loader是file-loader或者url-loader，两者的主要差异在于。url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。本文的主要想说的是我们在使用file-loader或url-loader时经常出现的图片地...

在webpack中有时需要使用hash来做静态资源实现增量更新方案之一，文件名的hash值可以有三种hash生成方式，每一种都有不同应用场景，那么三者有何区别呢？hash如果都使用hash的话，因为这是工程级别的，即每次修改任何一个文件，所有文件名的hash至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。如：可以从上图清晰的看见每个压缩后的文件的hash值是一样...

低版本浏览器引起的问题最近开发一个基于webpack+babel+react的项目，一般本地是在chrome浏览上面开发，chrome浏览器开发因为支持大部分新的js特性，所以一般不怎么需要polyfill， 比如Promise，string实例的includes方法等。即使在低版本浏览器中，通过babel-runtime的polyfill也是可以转换的，但是事不竟然，项目在IE9浏览器上报错...

2.ansycData的await方法当然上面的方法稍显过时，现在都在用ansyc…await来解决异步,改写上面的代码。第一节：nuxt.js相关概述nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR（服务器端渲染）.Vue.js是开发SPA（单页应用）的,Nuxt.js这个框架，用Vue开发多页应用，并在服务端完成渲染，可以直接用命令把我们制作的vue项目生成...

地址：https://github.com/ksibesh/redux-api-http/blob/master/bin/index.jsredux-api-httpLibrary to send http request while following redux architecture.Installationnpm install redux-api-http --sav...

以前在看深入浅出react和redux的时候， 那个demo 总是用creat-react-app 创建的， 现在终于可以实现自己手动搭建一个简单的demo了。1.首先新建一个文件夹， 执行npm init2.安装各类插件如下：{ "name": "react_first", "version": "1.0.0", "description": "", &qu

其实React Import scss 是非常简单的，比如一般写法import './PromotionPage.scss';，今天遇到一个样式需要覆盖，那么修改后的代码变成了：import './PromotionPage.scss';import { config } from "../../../common/config";if (config.spec == "venetian...

控制台报错如下：查询PropTypes官网资料如下:使用 PropTypes 进行类型检查注意： 从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义contextTypes。所以在使用之前：随着应用规模的提升，你可以通过类型检测捕获更多的bug。对于部分应用，你可能需要使用类似于 Flow 或者...

详情参考官方JSX规范虽然JSX是扩展到ECMAScript的类XML语法，但是它本身并没有定义任何语义。也就是说它本身不在ECMAScript标准范围之内。它也不会被引擎或者浏览器直接执行。通常会利用很编译器预处理器来将这些JSX转化为标准的ECMAScript。吐槽：虽然JSX出发点是好的，而且写起来也很简单，但是对于要在JS中写类HTML格式的内容，我的内心是排斥的，感觉非常不习...

先来几个术语：官方 我的说法 对应代码 React element React元素 let element=<span>A爆了</span> Component 组件 class App extends React.Component {} 无 App为父元素，App1为子元素 <App><A...

这几天在看react、redux，在试用redux的combineReducers，准备动手敲一敲代码，按照书上的讲解背着敲一遍示例，结果刚到使用combineReducers创建store就无情的抛出错误，先分享个错误描述和截图：醒目的报错：Error: Reducer "todos" returned undefined during initialization. If the st...

前提条件：当前时间是2018年9月27日。webpack的最新版本为是 v4.20.0extract-text-webpack-plugin 当前通过install默认安装到的版本是v3.0.2问题描述使用extract-text-webpack-plugin在打包是提示错误(node:12712) DeprecationWarning: Tapable.plugin is...

问题：Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' at Function.Module._resolveFilename (module.js:438:15) at Function.Module._load (module.js:386:25)1.卸载webpack并重装webpack...

最近学习react redux，先前看过了几本书和一些博客之类的，感觉还不错，比如《深入浅出react和redux》,《React全栈++Redux+Flux+webpack+Babel整合开发》，《React与Redux开发实例精解》， 个人觉得《深入浅出react和redux》这本说讲的面比较全， 但是 很多都是蜻蜓点水， 不怎么深入。这里简单记录一个redux 的demo， 主要方便以后自己...

一、 啥问题在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误最初以为是babel-core没有安装上。重装了好几遍babel-core还是不行。对照以前的项目,发现babel-loader的版本不一样,之前的是@7.1.5版本,而现在是@8.0.0版本。二、 解决方法带着半信半疑的心情安装回...

最近在学习React的服务端的东西， 感觉有些难度， 最近看的多了， 有点感觉了，比如React16.x中的服务端渲染（SSR）写的不错，很很简单，后来发现Next框架 很简单， 所以抄录下来了。服务器端渲染服务端渲染是指页面的渲染和生成是在服务端完成的，并将渲染好的页面返回客户端。Next.js是什么Next.js是一个使用React构建服务呈现Web的应用程序。它使用React语法...

1. 介绍在开发react应用时，应该没有人用传统的方法引入react的源文件(js)，然后在html编辑吧。大家都是用webpack + es6来结合react开发前端应用。这个时候，我们可以手动使用npm来安装各种插件，来从头到尾自己搭建环境。比如：npm install react react-dom --savenpm install babel babel-loa...