常见的plugin、loader，插件loader的区别，webpack的构建流程，性能优化，hash生成，热更新原理，tree-shaking原理……

本文从这 2 个角度出发，收集一些相关优化资料。 resolve.modules 用于配置 Webpack 去哪些目录下寻找第三方模块，默认是 ['node_modules']。 但是，它会先去当前目录的 ./node_modules 查找，没有的话再去 ../node_mod…

本文目的，实现一个可以移除项目中 console.log 的 webpack 插件。借此，我们可以学习一下webpack 插件怎么写。 本来以为比较简单，但还是花了我一个上午的时间。 此时我们运行 yarn build 就会在 dist 目录打包出一个 main.js。我们使用…

随着项目不断发展壮大，组件数量开始变得越来越多，项目也开始变得庞大，webpack 编译的时间也会越来越久，我们现在的项目编译一次在 40s ——70s 之间，这是一个效率非常低下的操作。优化的手段有很多，之前项目原本已经做了很多，本文从缓存的角度进行优化讲解 babel-lo…

如今，CLI工具（如create-react-app或Vue -cli）已经为我们抽象了大部分配置，并提供了合理的默认设置。 即使那样，了解幕后工作原理还是有好处的，因为我们迟早需要对默认值进行一些调整。 在本文中中，我们会知道 webpack可以做什么，以及如何配置它以满足我…

1. Module module 是用来配置处理模块的规则，有以下三个主要部分。 同 noParse 配置项的区别在于，parser可以精确到语法层面,可以更细粒度地配置哪些模块语法被解析、哪些不被解析，而 noParse 只能控制哪些文件不被解析。 2. Resolve Re…

libraryTarget: “window” : 当 library 加载完成，返回值将分配给 window 对象。 libraryTarget: “umd” ：这是一种可以将你的 library 能够在所有的模块定义下都可运行的方式。它将在 CommonJS, AMD 环境…

Parcel相比前面介绍的webpack最大的区别就是：不需要维护配置文件，举个例子来说明：如果你想转换less的语法，在webpack你需要配置less-loader来完成，而Parcel不需要安装 less, 当检测到 less 文件时 Parcel 将会自动转换。换句话说…

之前在vue项目发布部署过程中，把流程梳理下来，做个小分享。 项目中涉及使用了 vue-cli 3x脚手架、自动化部署工具jenkins、nginx等。 做这个分享目的也是想帮不清晰部署的前端小伙伴们 👬 做个简单的梳理。 首先我们先讲下 Vue-cli 的配置。 本地开发环…