构建 Webpack 知识体系

Webpack 定义解析

为什么要学习Webpack

理解前端“工程化”概念、工具、目标 一个团队总要有那么几个人熟悉 Webpack （大部分的工程环境都基于 Webpack），某种程度上可以成为个人的核心竞争力 高阶前端必经之路

课程目标

理解 Webpack 的基本用法 通过介绍 Webpack 功能、 Loader 与 Plugin 组件设计，建立一个知识体系 不会事无巨细的介绍 Webpack 所有 也不是深入源码，讲解底层实现原理

什么是Webpack

前端项目由什么构成？ —— 资源 本质上是一种前端资源编译、打包工具 webpack被定义为现代 JavaScript 应用程序的静态模块打包器，是目前最为流行的JavaScript打包工具之一。 webpack会以一个或多个js文件为入口，递归检查每个js模块的依赖，从而构建一个依赖关系图，然后依据该关系图，将整个应用程序打包成一个或多个bundle。 由于webpack是用nodejs编写的，所以它依赖的运行环境就是nodejs。也正因为这一点，webpack只能识别JavaScript，所有非JavaScript（包括HTML，CSS，Typescript等）编写的文件都需要经过处理，这是借助对应的loader实现的。 webpack使用的是nodejs默认的模块系统：commonjs，借助nodejs提供的API来操作待打包项目的源文件（如fs模块、path模块等）。webpack将这些文件整合压缩后，输出到一个特定的目录下（通常是dist）。处理过的dist一般会被直接上传到静态资源服务器使用

使用Webpack

e.g entry 即入口，指webpack以哪个文件为入口起点开始打包，分析构建内部依赖关系； 1.写成String格式：打包形成一个chunk,输出一个bundle文件，此时chunk默认名称为main entry:'./src/js/index.js', 2.写成Array格式： 所有入口文件最终会形成一个chunk，输出一个bundle文件，用于HMR让html热更新生效。 entry:['./src/js/index.js','./src/js/test.js'], 3.写成Object格式： 用几个入口文件就形成几个chunk，输出一个bundle文件，chunk文件名称为对象的key。 entry:{ index:'./src/js/index.js', test:'./src/js/test.js' }, 4.特殊用法 entry:{ // 所有入口文件最终会形成一个chunk，输出一个bundle文件 index:['./src/js/index.js','./src/js/index1.js'], // 形成一个chunk,输出一个bundle文件 test:'./src/js/test.js' },