webpack 是一个前端资源加载/打包的工具。 其将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源 。。。 一. webpack初始化项目： 二. 配置文件出入口 三. loader-常用loader： 四. Plugin-常用插件： Plug…

webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？ Plugins：Loaders将各类型的文件处理成webpack能够处理的模块，plugins有着很强的能力。…

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。 Chunk：代码块，一个 Chunk 由…

随着现代前端开发的复杂度和规模越来越庞大，已经不能抛开工程化来独立开发了，如react的jsx代码必须编译后才能在浏览器中使用；又如sass和less的代码浏览器也是不支持的。 而如果摒弃了这些开发框架，那么开发的效率将大幅下降。在众多前端工程化工具中，webpack脱颖而出成…

1. webpack是干什么的，它如今在前端是一个什么样的地位 这个其实不用多说了，如今的前端项目哪里还有用不到打包工具的呢，而webpack又作为打包工具中的王者我们又有什么理由不去搞明白它呢。 2. commonjs与ES6 Module不应该了解吗 默认导出export …

三篇长文带你解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每…

临近年末，又到了各大公司举办年会的时候了。对于年会，大家最关心的应该就是抽奖了吧？虽然中奖概率通常不高，但总归是个机会，期待一下也是好的。 最近，我们部门举办了年会，也有抽奖环节。临近年会的前几天，Boss 突然找到我，说要做一个抽奖程序，部门年会要用。我当时都懵了：就三天时间…