前端361

webpck-dev-ser作为开发时的服务非常方便，本文将对webpack-dev-server从原理层次解析，来看看它是如何实现服务和热更新的。1，webpack-dev-server的服务原理基于express，搭建了一个http服务，根据路由返回不同的内容2，静态资源服务webpack-dev-server使用了webpack-dev-middleware，改变了webpa...

在webpack打包时，第三方库的引用会降低打包速度，而且在打包后资源过大，发布上线后，资源加载慢。这时可以考虑把第三方库抽离出来。步骤：1，读取package.json下依赖的第三方库，作为webpack.dll.config的入口文件，配置如下： output: { path: path.resolve(__dirname, "../src/static/"), ...

webpack作为前端打包的重要工具之一，我们有必要深入掌握webpack的底层数据结构。官方文档上直接给出了webpack的核心模块tapable,但是并没有给出特别详细的介绍其实现原理和内部实现，本文从源码触发，来解析下tapable的数据结构和方法属性，这对于掌握webpack打包机制的理解是很有帮助的。总览：hook.js数据结构： constructor(args) ...

最近很多人提问webpack中的钩子机制底层是怎样的，本文从模块层面出发，分析一下hooks钩子的传递，以及hook这个底层数据结构的实现。compiler中的hooks:源码如下class Compiler extends Tapable { constructor(context) { super(); this.hooks = { /** @type {Sync...

loader在webpack打包流程中，有着比较重要的地位，很多资源类型需要经过loader的转化改变成浏览器能够识别的资源类型。1，loader的本质是一个node模块，它输出了一个函数，当某个资源需要用这个loader转换时，该函数就会被调用。形式如下：module.exports = function(src){ //可以通过 this 访问Loader API //...

功能类 html-webpack-plugin copy-webpack-plugin webpack-manifest-plugin && assets-webpack-plugin clean-webpack-plugin compression-webpack-plugin progress-bar-webpack-plugin 代码相关类 ...

output.library和output.libraryTarget属性可能大家都会比较陌生，因为一般如果只在项目中使用 webpack 不需要关注这两个属性，但是如果是开发类库，那么这两个属性就是必须了解的。类库的几种方式：script标签 AMD commonjs ES6 module <script src="demo.js"></...

webpack是一个很好用的打包工具，怎么配置和使用大家都比较熟悉了，其中在配置的过程中会用到很多plugin，如果想进一步了解webpack，就要了解plugin的工作机制，再进一步，就是自己动手封装一个plugin.插件存在的环节：Webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，...

webpack在前端工程化应用上有着很重要的地位，说到webpack，就会想到一堆插件，但是大部分开发工程师仅仅知道插件的使用啊，未曾去研究插件实现原理，这对于工程的定制化有着很重要的意义。本文主要探讨如何实现一个webapck插件，当然功能是相对简单的。有兴趣的可以去阅读一些webpack插件的源码，当然如果有大牛看到，欢迎留言指正不足。webpack插件的作用是用来解决一些loader无法...

在前端开发工程中，实现项目自动化和工程化越来越重要，而每次搭建前端项目的时候，很多文件都源自复制粘贴，这是一些重复的工作。虽然现在已经有了很多大的脚手架生成工具，像create-react-app, vue-cli，但是这些工具生成的脚手架可能和我们的业务场景相差较远，生成过后还需要手动更改，也是比较麻烦的，另外，对于自己封装的脚手架可以加入定制的东西，对于开发团队而言，扩展性较强。前端脚手架...

近几天搭建无刷新开发前端框架，在配置过react-hot-loader后，发现代码更新后，浏览器仍然会刷新，找了很久，发现配置都是正确的。这对于一个架构师来说是不可以容忍的，花了一天找到并解决了这个问题，react-hot-loader中隐藏着一个大坑，希望大家可以避免。用一句话总结这个bug：当你的入口组件通过解构方式引入时，即使配置了react-hot-loader后，浏览器仍会刷新更新...

观察者模式也叫 发布者-订阅者模式，发布者发布事件，订阅者监听事件并做出反应在传统的前端解耦方面，观察者模式作为比较常见一种设计模式，大量使用在各种框架类库的设计当中。 核心代码：// eventProxy.js'use strict';const eventProxy = { onObj: {}, oneObj: {}, on: function(key, fn...