上一篇文章我写了tapable的基本用法，我们知道他是一个增强版版的发布订阅模式，本文想来学习下他的源码。tapable的源码我读了一下，发现他的抽象程度比较高，直接扎进去反而会让人云里雾里的，所以本文会从最简单的SyncHook和发布订阅模式入手，再一步一步抽象，慢慢变成他源码的样子。本文可运行示例代码已经上传GitHub，大家拿下来一边玩一边看文章效果更佳：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master...
这次给大家带来webpack刷新解析功能使用，webpack刷新解析的注意事项有哪些，下面就是实战案例，一起来看一下。前端需要频繁的修改js和样式，且需要根据浏览器的页面效果不断的做调整；而且往往我们的开发目录和本地发布目录不是同一个，修改之后需要发布一下；另外一点就是并不是所有的效果都可以直接双击页面就能看到，我们常常需要在本地用nginx建一个站点来观察(自己电脑上ok了才放到测试环境去)。所以如果要用手工刷新浏览器和...
这次给大家带来vue+webpack项目实战解析，vue+webpack项目使用的注意事项有哪些，下面就是实战案例，一起来看一下。在开发时，前后端分离同时进行开发。前端调用后端给的接口也是在局域网内部的。但是，当项目推到线上的时候,会从真实服务器上获取接口,在测试接口和真实接口之间频繁切换，让人十分恶心。第一步，在webpack配置文件中，分别设置不同的接口地址打开dev.en.js文件。修改如下：var merge = require(webpack-merge) var...
这次给大家带来Webpack path与publicPath区别使用解析，Webpack path与publicPath区别使用的注意事项有哪些，下面就是实战案例，一起来看一下。前言在webpack模块化开发的过程中，发现webpack.config.js配置文件的输出路径总有一个path与publicPath，不解其意。module.exports = {output: {path: path.resolve("./examples/dist"),filename: "app.js",publicPath: "What should I put here?" } }正文官方解释publicPath: The outp...
这次给大家带来使用webpack自动刷新与解析步骤详解，使用webpack自动刷新与解析的注意事项有哪些，下面就是实战案例，一起来看一下。前端需要频繁的修改js和样式，且需要根据浏览器的页面效果不断的做调整；而且往往我们的开发目录和本地发布目录不是同一个，修改之后需要发布一下；另外一点就是并不是所有的效果都可以直接双击页面就能看到，我们常常需要在本地用nginx建一个站点来观察(自己电脑上ok了才放到测试环境去)。所以如果...
这次给大家带来webpack3的loader使用解析，webpack3中loader使用解析的注意事项有哪些，下面就是实战案例，一起来看一下。首先亮出webpack官方网站，webpack能干什么？官网给出的答案就是，一句话，让一切变得简单！各式各样的loader层出不穷，让我们在构建时不知所措，于此，总结下loader的全解析。概念loader，顾名思义，加载器，英文的解释如下：Loaders are transformations that are applied on the source code of a module...
这次给大家带来webpack自动刷新与解析的使用，使用webpack自动刷新与解析的注意事项有哪些，下面就是实战案例，一起来看一下。前端需要频繁的修改js和样式，且需要根据浏览器的页面效果不断的做调整；而且往往我们的开发目录和本地发布目录不是同一个，修改之后需要发布一下；另外一点就是并不是所有的效果都可以直接双击页面就能看到，我们常常需要在本地用nginx建一个站点来观察(自己电脑上ok了才放到测试环境去)。所以如果要用手...
这次给大家带来webpack3.x的entry,output,module解析，使用webpack3.x的entry,output,module的注意事项有哪些，下面就是实战案例，一起来看一下。 webpack作为如今的热门工具跟前端三大框架密不可分,是有学一下的必要的; 先决条件: 有node环境,有npm工具;(新版的node自带了npm工具); 下面开始一步一步的做吧: 1.先选择一个目录作为你的项目存放的位置; cmd 工具进入到项目目录(假设我的是D:\webpack-demo4); 然后使用...
webpack能干什么？官网给出的答案就是，一句话，让一切变得简单！各式各样的loader层出不穷，让我们在构建时不知所措，于此，总结下loader的全解析。本文主要介绍webpack3之loader全解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。概念loader，顾名思义，加载器，英文的解释如下：Loaders are transformations that are applied on the source code of a module. They all...
我们在用webpack打包是时候，常常想单独提取第三方库，把它作为稳定版本的文件，利用浏览缓存减少请求次数。常用的提取第三方库的方法有两种本文主要介绍了详解webpack提取第三方库的正确姿势，常用的提取第三方库的方法有两种，本文详细的介绍了这两种方法，有兴趣的可以了解一下，希望能帮助到大家。CommonsChunkPluginDLLPlugin区别：第一种每次打包，都要把第三方库也运行打包一次，第二种方法每次打包只打包项目文件，我们只要...
前言 webpack是如何解析代码模块路径 webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的，这个模块可以说是 Node.js 那一套模块路径解析的增强版本，有很多可以自定义的解析配置。 模块解析规则 解析相对路径 查找相对当前模块的路径下是否有对应文件或文件夹是文件则直接加载是文件夹则继续查找文件夹下的 package.json 文件有 package.json 文件则按照文件中 main 字段的文件名来查找文件无 package....
最近在学习 webpack源码，由于源码比较复杂，就先梳理了一下整体流程，就参考官网的例子，手写一个最基本的 webpack 模块解析器。 代码很少，github地址：手写webpack模块解析器 整体流程分析1、读取入口文件。 2、将内容转换成 ast 语法树。 3、深度遍历语法树，找到所有的依赖，并加入到一个数组中。 4、将 ast 代码转换回可执行的 js 代码。 5、编写 require 函数，根据入口文件，自动执行完所有的依赖。 6、输出运行结果。 cr...
本文介绍了Webpack核心模块tapable，分享给大家，具体如下：前言 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，是对前端项目实现自动化和优化必不可少的工具，Webpack 的 loader （加载器）和 plugin （插件）是由 Webpack 开发者和社区开发者共同贡献的，而目前又没有比较系统的开发文档，想写加载器和插件必须要懂 Webpack 的原理，即看懂 Webpack 的源码， tapable 则是 Webpack 依赖的核心库，可以说不懂 tapable...
tree-sharking 简介tree-sharking 是 Webpack 2 后续版本的优化功能，顾名思义，就是将多余的代码给 “摇晃” 掉，在开发中我们经常使用一些第三方库，而这些第三方库只使用了这个库的一部门功能或代码，未使用的代码也要被打包进来，这样出口文件会非常大，tree-sharking 帮我们解决了这个问题，它可以将各个模块中没有使用的方法过滤掉，只对有效代码进行打包。 AST 语法树分析假设我们现在使用了 ElementUI 库的两个组件，通常会...
每次学新东西总感觉自己是不是变笨了，看了几个博客，试着试着就跑不下去，无奈只有去看官方文档。 webpack是基于node的。先安装最新的node。 1.初始化 安装node后，新建一个目录，比如html5。cmd中切到当前文件夹。 npm init -y 这个命令会创建一个默认的package.json。它包含了项目的一些配置参数，通过它可以进行初始安装。详细参数：https://docs.npmjs.com/files/package.json。 不要y参数的话，会在命令框中设置各项参数，但...