- 博客(12)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 编写一款自定义修改html文件中的img、script、link hash后缀的简单gulp插件
编写一款自定义修改html文件中的img、script、html hash后缀的简单插件我们这篇文章将根据我们自己的一些项目需求，来编写一个本地gulp插件，来满足我们的构建开发需求，主要需求就是在编译html的同时，对html文件中的静态资源引用添加随机hash后缀。插件代码实现index.jsvar through = require("through2")// 正则替换func...
2019-06-30 11:44:39
1008
原创 webpack 创建个人的第三方依赖library
webpack 创建个人的第三方依赖 library导读除了打包应用程序代码，webpack 还可以用于打包 JavaScript library,所以我们可以使用webpack很方便的打包我们的library项目项目地址：https://github.com/RiversCoder/webpack-test项目目录 |- webpack.config.js |- package...
2019-06-27 16:16:56
1522
原创 webpack 缓存问题处理解决与性能优化方案
webpack 缓存问题处理解决方案导读在该篇博文中，我们将逐步实现文件hash后缀的输出，修改某个文件，才会对应输出修改该文件的hash后缀，同时满足性能优化，客服端服务端代码同步更新项目地址：https://github.com/RiversCoder/webpack-test官网介绍在之前的指南案例中，我们使用 webpack 来打包我们的模块化后的应用程序，webpack 会生...
2019-06-20 17:04:18
2560
原创 webpack 引入の公共模块代码分离及懒加载
webpack 公共引入模块代码分离及懒加载导读在该篇博文中，我们将分别部署生产和开发的webpack打包编译以及项目运行环境项目地址：https://github.com/RiversCoder/webpack-test基本的代码分离案例在src目录下编辑index.js如下：import _ from 'lodash' // index.js中引入了lodashimpor...
2019-06-18 15:48:42
1362
原创 webpack开发生产环境配置
webpack 生产/线上环境构建导读在该篇博文中，我们将分别部署生产和开发的webpack打包编译以及项目运行环境项目地址：https://github.com/RiversCoder/webpack-test配置文件安装webpack-mergecnpm install --save-dev webpack-merge在项目主目录中新建如下几个js文件：D:\me\...
2019-06-17 14:14:16
1168
原创 webpack热更新案例实现
webpack热更新案例操作导读模块热替换(Hot Module Replacement 或 HMR)， 也叫热更新，它是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行浏览器刷新或者命令行重启。注意：热更新 HMR只能在开发环境使用，不适用于生产环境使用webpack.config.js启用 HMR启用该功能实际上相当简单。而我们要做的，就是更新 we...
2019-06-14 14:50:57
2194
原创 webpack常用开发工具模块介绍
webpack常用开发工具模块介绍导读在webpack的构建过程中我们需要用到一些基本构建开发工具来提升我们的工作效率，这些工具有哪些呢？source map 自动追踪代码错误所在的文件webpack watch 观察者模式自动编译webpack-dev-server 指定目录启动本地服务webpack-dev-middleware 传递文件给服务器source map 自动追...
2019-06-13 17:54:42
936
原创 webpack静态资源管理加载及输出管理
webpack指南梳理学习 - 静态资源管理加载及输出管理导读在webpack中，静态资源管理加载和输出管理是非常重要的一个功能，在模块化开发中起到了很重要的作用，我们通过加载打包css、图片、字体、数据文件等来了解webpack对资源的管理安装依赖cnpm install --save-dev style-loader css-loader # 加载csscnpm install -...
2019-06-12 14:38:33
1827
原创 webpack安装和基本构建
webpack指南梳理学习 - 安装和基本构建导读webpack是前端开发过程中使用超多，用户量超广的一款前端开发打包编译工具，用起来让你欲罢不能，爱不释手。作为目前最火的打包工具，它又是如何使用工作的呢？接下来，我们来通过官网的指南学习梳理webpack的基础知识，掌握webpack的常用功能知识点webpack安装前提在学习之前，我相信你们已经基本掌握前端的相关基础知识点，而且本地电...
2019-06-11 10:57:26
746
原创 gulp-swig动态数据模板编译输出html文件
导读在node开发的过程中使用使用swig模板的情况比较多的，所以呢，如何快速便捷编译swig模板成为我们的一个面临的选择，使用webpack下的loader，还是gulp生态圈的插件呢？这里我推荐使用gulp-swig插件，可以在本地使用swig快速开发web项目，包括数据的输入，模板的继承等等推荐官网文档：https://www.npmjs.com/package/gulp-swig...
2019-06-05 15:35:55
1342
原创 如何制作一个gulp生态插件？gulp插件实战案例开发
在使用`gulp`构建前端项目的时候，可能会需要一些功能，但这些功能目前没有`gulp`插件实现，所以可能需要自己写一个插件来满足开发使用。但是，如何开发一款`gulp`插件呢？
2019-06-04 14:46:20
962
原创 gulp-jade 动态数据渲染编译模板 热更新案例开发
导读我们今天来聊一聊如何使用gulp编译生成jade模板；如果你想快速编写html，就可以使用node下很火的一款模板语法jade，但你便写完代码后，想要立即看到效果就可以使用gulp生态里面的gulp-jade插件，它可以把jade文件动态编译渲染成html，包括数据列表的渲染我们要实现的目标效果是：编辑jade文件保存，页面自动热更新案例代码 - 第一阶段 ( 初级阶段 )下面这个...
2019-06-03 16:09:47
1188
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人