webpack原理篇（五十六）：webpack流程：模块构建和chunk生成阶段
创建完一个 NormalModule 之后的构建，找到开始构建某个模块的 build-module。使用了 acorn，目的是把代码里的 require 依赖添加到模块依赖列表里面去。40 行，执行 addEntry 方法 make 构建阶段正式开始。里的 finish 方法，这里的 module 就是处理之后的源码。NormalModuleFactory ：直接导出摸个函数的。上一节到了run这里，下面看一下 compile。执行完 doBuild 之后就会解析。玩转 webpack 学习笔记。...
webpack原理篇（五十八）：实战开发一个简易的webpack
抽象语法树（abstract syntax tree 或者缩写为 AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。打包完成之后我们可以看到多了一个 dist 的文件夹，里面有打包好的。新建 lib 文件夹，首先添加 index.js 文件，到时执行。新建 mini-webpack 文件夹，执行下面命令，初始化项目。然后打包，成功之后刷新页面，我们可以看到效果也变了。文件，里面依赖 common 文件夹里的。新建 src，里面添加。...
webpack原理篇（五十九）：loader 的链式调用与执行顺序
定义：loader 只是一个导出为函数的 JavaScript 模块。新建文件夹 loader-order，然后执行初始化命令。结构如下：loader 的代码在上面，这里就不粘贴了。多个 Loader 串行执行顺序从后到前。玩转 webpack 学习笔记。，我们就可以知道顺序是。...
webpack原理篇（六十）：使用 loader-runner 高效进行 loader 的调试
定义：loader-runner 允许你在不安装 webpack 的情况下运行 loaders作为 webpack 的依赖，webpack 中使用它执行 loader进行 loader 的开发和调试。
webpack原理篇（六十一）：更复杂的 loader 的开发场
模板和正则表达式在当前加载器的上下文中设置为名为 name 和 regExp 的查询参数。通过 loader-utils 的 getOptions 方法获取。缓存条件： loader 的结果在相同的输入下有确定的输出。我们在 loader-order 项目里安装依赖。webpack 中默认开启 loader 缓存。可以看到使用了 interpolateName。loader 内直接通过 throw 抛出。，可以看到生成出来了 index 文件。我们可以看一下 dist 文件夹。还有 emitFile。...
Name expected [js/chunk-4b5816b5.0950b124.js:250,6] from UglifyJs
vue 项目可以正常启动运行，但是使用 vuecli3 打包时却 js 报错，项目里使用了 html2canvas 跟 jspdf，然后打包里面使用了。不支持新的 es6 语法，解决方法就是使用。配置，注意这里需要用 4.x 版本的。...
使用 spritesmith 报错 Error: Invalid file signature
扩展名，而不是正确导出为 PNG，所以检查一下图片是否被这样修改过。可能是因为上面的图像被创建为 JPG 然后重命名为。使用 spritesmith 时，依赖包报错了。替换图片后，我再次执行就没有问题了。...
webpack原理篇（六十二）：实战开发一个自动合成雪碧图的loader
新建文件夹 sprite-loader，然后执行下面命令初始化项目。然后在 loaders 文件夹添加图片跟 css 文件。我们在 src 的 img 文件夹里添加 3 张图片。然后我们查看一下 dist 目录，我们发现加了。然后可以看到 dist 目录生成了一个。最后在 loaders 文件里添加。玩转 webpack 学习笔记。对样式里面图片引用后面加。图片也是，只合成了加了的。...
webpack原理篇（六十三）：插件基本结构介绍
新建文件夹 my-plugin 文件夹，执行。插件没有像 loader 那样的独立运行环境。新建 plugins 文件夹，里面添加。只能在 webpack 里面运行。玩转 webpack 学习笔记。加入到 webpack 配置中。
今日推荐
周排行