前端必不可少的脚手架

前端必不可少的脚手架关于打包东西的了解程度渐渐地也现已成为衡量前端开发工程师水平的一个重要目标。记住在校招面试的时分就有问各种打包东西的问题，如关于 Gulp、Grunt、Webpack 的了解程度，各种打包东西的特色及优缺点等。而当我们逐步融入到一个特定的团队中，一般都有现成的脚手架提供给我们运用，而关于脚手架自身的重视程度也会渐渐下降。那是否就意味着，不需求把握脚手架的相关常识了呢？其实不然，有以下几个理由。（1）任何脚手架都有必定的适用场景，可是一起也有鸿沟，如果不小心跨域了这个鸿沟，那么很可能遇到意想不到的问题，如 bug。此刻，如果对脚手架的原理有必定的了解，那么也可以更快的定位问题。（2）任何一个脚手架都不可能是完美的，都会存在一个优化的阶段，如果仅仅用它，而不去了解它、优化它，那么自身就是一个寻求完美的工程师不应该具有的情绪。何况，关于工程师来说，仅仅会用而不知道其原理自身就是一个笑话。系列内容本课程是依据对 Webpack 有必定的了解，或许是想深化了解 Webpack 打包原理的读者而写的。如果仅仅想了解怎么运用 Webpack，那么网上的大部分材料现已足够了。现在对本课程做一个归纳，首要内容包括以下部分。（1）Webpack 的中心概念在本章节，首要会经过一个依靠图谱的比如来打开，详细的论说 Webpack 的 loader、plugin、entry、output 等中心概念。结合 Webpack 2 官网的阐明以及日常开发实践经验进行深化的剖析。会运用完好的实例让读者对 Webpack 中心概念有深化的了解，什么是 chunk、common chunk、hotUpdated chunk、externals、libraryTarget、library 等疑问会在本章节给出答案。（2）Webpack 根本运用本章节从 Webpack 的根本运用动身，可是又不止于根本运用，会结合 7 个实例代码来深化的剖析 Webpack 与 CommonChunkPlugin 结合后的打包实践与原理。一起关于 CommonChunkPlugin 的各种装备都会运用详细的实例来深化解说。经过本章节的学习，不只会运用 Webpack，并且还知道怎么更好的运用 Webpack。（3）webpack-dev-server 中心概念本章节会深化剖析 webpack-dev-server 相关的概念，如 Proxy 署理、HMR 原理、contentBase、publicPath、lazyload、filename 等许多装备的详细解说。经过深化的了解这部分内容，不只可以了解优化的点，一起也能更好的处理实在项目开发中可能遇到的问题。（4）webpack-dev-server 根本运用本章节首要解说怎么在项目中运用 webpack-dev-server，并深化的剖析了 webpack-dev-server 的 iframe 形式与 inline 形式的差异。网上关于这两者的差异大都来自于官网的翻译，在本章节中会结合详细的实例来进行剖析。（5）Webpack 的 HMR 原理剖析在本章节中，不只会解说 Webpack 完成 HMR 的原理，一起也会解说怎么写出支撑 HMR 的代码，然后可以深化的了解 HMR。这其中会包括常见的函数：decline() 函数、accept() 函数、dispose() 函数、status() 函数、apply() 等函数进行剖析，一起也会详细地解说 Webpack 与 HMR 的相关装备信息，以便在今后运用 Webpack 的时分称心如意。（6）Webpack 中的 Compiler 和 Compilation 目标Compilation 和 Compiler 目标是写 Webpack 插件的中心内容，在本章节中不只会详细叙述两者的效果以及怎么在插件中运用它们，一起也会解说在 Webpack 插件书写中常常运用到的办法或许特点。经过本章节，不只能了解什么是模块、依靠模块、chunk、资源等，还能知道怎么依据详细场景来运用这些资源。（7）Webpack 常见插件原理剖析在本章节中会将重视点放在 Webpack 两个插件的原理上，包括 CommonChunkPlugin 和 PrepackWebpackPlugin，经过这两个插件来加深对上面常识的了解，然后为下文写一个 Webpack 插件做衬托。（8）写一个 Webpack 插件Webpack 插件是扩展 Webpack 根底功用的首要途径，在本章节中会解说怎么写一个 Webpack 插件。（9）写一个 Webpack 的 loader在本章节中会运用 Markdown 文件处理 loader 来解说怎么写 Webpack 的 loader。（10）Webpack 结合 react-router 完成按需加载在上面的章节中，讲到了怎么运用 require.ensure 来动态发生独立的 chunk 的问题，在本章节会运用 react-router 的比如来解说怎么运用 Webpack 的这种特性。经过动态按需加载的特性可以削减页面初次加载的时长，合作单页面运用肯定是页面优化的首选。（11）Webpack 2 的 Tree-shaking 深化剖析Tree-shaking 是 Webpack 2 引进的新特性，本章节会详细描述怎么运用 Tree-shaking 及其原理和适用范围。本章节内容包括详细的实例，所以读者必定可以很好的了解这种新特性。（12）以 Node 方法集成 Webpack 和 webpack-dev-server 打包在本章节中将运用一个很好的比如来解说怎么依据 Webpack、webpack-dev-server 来写一个打包东西并习惯详细的事务场景。经过本章节的内容，能很好的将上面章节的内容做一个串联，一起也能更好的了解 Webpack。写给读者其完成在依据 Webpack 的打包东西都现已十分老练，所以读者可以随意的在 Github 或许 npm 中找到需求的脚手架。可是，就像文章最初所说，只要了解了 Webpack 的中心原理，才能在开发中做到称心如意。我见过许多同学，可以正常的运用 Webpack，对许多 Webpack 的装备也了解，可是当遇到问题的时分往往手足无措。经过本系列课程，会让读者脱节现状，更好的了解 Webpack 原理，而不会知其然不知其所以然。