共计 1807 个字符，预计需要花费 5 分钟才能阅读完成。
构建其实是工程化、自动化思维在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列简单的流程。构建给前端开发注入了更大的生机，解放了咱们的生产力。
Webpack 凭借弱小的性能与良好的应用体验，曾经成为目前最风行，社区最沉闷的构建工具，是古代 Web 开发必须把握的技能之一。
背景
在当下的前端环境里，各种框架和工具层出不穷，比方 React、Vue、Angular 等，极大的进步了咱们的开发效率，然而，他们都有一个共同点：源代码无奈间接运行，必须通过转换之后才可执行。
而转换代码的这个过程咱们能够称之为 构建 ，被用来进行构建的工具咱们叫做 构建工具，而 Webpack 便是其中的佼佼者。
构建工具的惯例作用：
- 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
- 文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
- 代码宰割：提取多个页面的公共代码、提取首屏不须要执行局部的代码让其异步加载。
- 模块合并：在采纳模块化的我的项目里会有很多个模块和文件，须要构建性能把模块分类合并成一个文件。
- 主动刷新：监听本地源代码的变动，主动从新构建、刷新浏览器。
- 代码校验：在代码被提交到仓库前须要校验代码是否符合规范，以及单元测试是否通过。
- 主动公布：更新完代码后，主动构建出线上公布代码并传输给公布零碎。
Webpack 的概念
Webpack 是应用 NodeJs 开发进去的一个构建工具，实质上，它是一个古代 JavaScript 应用程序的 动态模块打包器（module bundler）。
当 Webpack 解决应用程序时，它会递归地构建一个 依赖关系图（dependency graph），其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 bundle。
在 Webpack 里所有文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最初输入由多个模块组合成的文件。
Webpack 专一于构建模块化我的项目。借用 Webpack 官网首页的图片来看一下它到底是什么：
所有文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的益处是能清晰地形容出各个模块之间的依赖关系，以不便 Webpack 对模块进行组合和打包。通过 Webpack 的解决，最终会输入浏览器能应用的动态资源。
Webpack 的根本配置
以下是 Webpack 的根本配置，次要蕴含了 webpack 的四个 外围概念：
- 入口(entry)
- 输入(output)
- loader
- 插件(plugins)
const path = require('path');
module.exports = {
// 模式配置
mode: "production", // "production" | "development" | "none"
// 入口文件
entry: "./app/entry", // string | object | array
output: {
// webpack 如何输入后果的相干选项
path: path.resolve(__dirname,
"dist"), // string
},
module: {
// 对于模块配置
rules: [
// 模块规定（配置 loader、解析器等选项）{test: /\.jsx?$/,}
]
},
// 插件
plugins: [// ...],
}Webpack 的优缺点
长处：
- 专一于解决模块化的我的项目，能做到开箱即用一步到位；
- 通过 Plugin 扩大，残缺好用又不失灵便；
- 应用场景不仅限于 Web 开发；
- 社区宏大沉闷，常常引入紧跟时代倒退的新个性，能为大多数场景找到已有的开源扩大；
- 良好的开发体验。
毛病：
- 只能采纳模块化开发
抉择 Webpack 的起因
Webpack 能成为泛滥构建工具中的佼佼者，次要有以下起因：
- 大多数团队在开发新我的项目时会采纳紧跟时代的技术，这些技术简直都会采纳“模块化 + 新语言 + 新框架”，Webpack 能够为这些新我的项目提供一站式的解决方案；
- Webpack 有良好的生态链和保护团队，能提供良好的开发体验和保证质量；
- Webpack 被全世界的大量 Web 开发者应用和验证，能找到各个层面所需的教程和教训分享。
（本文完）
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！
常识与技能并重，内力和外功兼修，实践和实际两手都要抓、两手都要硬！
