初衷： 分享一下工作中实用的几个Plugin，希望对大家有些帮助，不喜勿喷。 用途： 将css样式从js文件中提取出来最终合成一个css文件，该插件只支持webpack4之前的版本，如果你当前是webpack4及以上版本那么就会报错。 上面配置中，extractTextPlug…

在前端工程化日趋复杂的今天，模块打包工具在我们的开发中起到了越来越重要的作用，其中webpack就是最热门的打包工具之一。 说到webpack，可能很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎在每一个项目中我们都会用上它，又因为webpack复杂的配置和五花八门的功能感到陌生。…

目前主流的前端框架vue和react都采用rollup来打包，为了探索rollup的奥妙，接下来就让我们一步步来探索，并基于rollup搭建一个库打包脚手架，来发布自己的库和组件。 写rollup的文章是因为笔者最近要规范前端开发的业务流程和架构，并提供内部公有组件库和工具库供…

首先来简单介绍一下webpack：现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个会映射项目所需的每个模块 的依赖图(dependency graph)，并生成一个或多个 bundle。webpack4.0出现之后，…

最近把vue-cli@2.x和create-react-app 的源码都看了一遍。由于现在官方推荐使用vue-cli@3.0，改动比较大，所以就不写关于vue-cli的了（据说是因为vue-cli@2.x创建项目时操作有点太复杂了，于是犹雨溪大大就借鉴了create-react…

一说起脚手架，你肯定会想到vue-cli。有些人看到vue-cli那个酷炫的功能和交互就会打退堂鼓。如果我告诉你，我们只需要具备nodejs基础就能写出vue-cli那样的功能来，你是不是稍微会兴奋点呢？接下来跟着我的步伐一点一点揭开脚手架的面纱吧。 cmd输入node -v,…

发布 npm 包。 脚手架 vue-cli 相信大家都使用过，很便捷。 几个指令就搭建好一个前端工程。 这边文章目的是教会大家如何发布个人的脚手架。

Tree-shaking的字面意思就是摇树。 一般伴随着摇树这样一个动作我们树上的这些枯树枝和树叶就会掉落下来。 那我们这里要说的Tree-shaking也是相同的道理，不过我们这里摇掉的使我们代码当中那些没有用到的部分，那这部分代码更专业的说叫未引用代码（dead-code）…

在此之前呢我们已经简单了解了webpack-dev-server的一些基本用法和特性，那他主要就是为我们使用webpack构建的项目提供了一个比较友好的开发环境，和一个可以用来调试的开发服务器。那使用webpack-dev-server就可以让我们的开发过程更加专注于编码。 因…