前言
最近十年，随着手机 移动平板和可穿戴设备的快速普及，web前端的开发触角也从传统的PC网页的开发发展到多终端的开发，所以我们就需要同时兼顾PC H5等各类不同分辨率的网页开发，因此针对不同的应用场景做不同的打包就显得很重要了。比如针对PC端的中后台应用，我们需要针对支持单页应用的打包构建，而H5页面通常对性能和可访问性有着极高的要求，因此需要通过 构建支持服务端渲染和PWA离线缓存。
再者，当下前端社区里最为流行的三大框架，react、angular、vue，他们的一些语法比如jsx,vue指令，这些在浏览器是无法解析的，也需要经过构建工具进行转换，熟悉webpack使用和原理可以让你拓宽前端技术栈，再发现页面打包的速度和资源体积的问题时，能够知道如何排查问题和优化。同时熟悉webpack原理，有助于对其他跨端应用的开发，比如在对小程序、weex、react native、electron等框架的打包时，能够快速上手。
在刚开始接触webpack时，对webpack的打包理念，一切皆为模块感到困惑，在webpack中不仅js是模块，其他的html、css、图片和字体等都可以成为模块，其次，webpack配置异常灵活，并且具备强大的插件化扩展能力。上手webpack确实是需要了解很多webpack里面的众多新的概念，entry、output、mode、loaders和plugins、热更新、code spliting和tree shaking等等。
为什么需要构建工具？
1、转换ES6语法
ES新的语法在浏览器的支持情况不好，尤其在一些低版本的浏览器。
2、转换JSX
3、CSS前缀补全/预处理器
4、压缩混淆
5、图片压缩
前端构建演变之路
最早的前端开发，我们都是切图片，然后编写js和css代码，这些代码是未经压缩的，后面大家意识到代码发布上线希望代码逻辑不要暴露出来，因此会找一些在线工具，把源代码上传上去，通过在线工具进行压缩，再把压缩后的代码拷贝到本地目录中，这个过程是及其繁琐的。到了07年，当时出了ant+Tool，可以将代码进行本地压缩。上面这种情况是持续了好几年。
再后来，整个业界requireJs和SeaJs模块化的概念不断催生，因此前端的代码编写的方式，模块化的编写方式也越来越复杂，后来又演变出了grunt，他本质上是一个Task Runner，grunt会将整个构建过程分为一个一个的任务，每个任务做一件事情，比如在整个grunt里面，会将打包过程分为解析html、解析css、解析js，包括代码压缩和文件指纹等等，他会把这些都算成一个个任务，任务执行完成之后，会把任务执行结果存放到本次磁盘的目录中，这样势必会导致打包速度慢，因为存在本地磁盘的IO操作。由于这个问题，演变出了gulp，gulp有文件流的概念，每一个任务的结果不会存在本地磁盘的文件中，而是直接存放在内存中，在下一个步骤会直接使用上一个步骤的内存，这样会大大提高打包的速度。
现阶段，使用的最多的打包工具是webpack，除此之外还有rollup、parcel等等。
为什么选择webpack
从GitHub stars和周下载量可以得知，webpack远远超过其他构建工具。
除此，webpack社区生态丰富：提供丰富的插件和loader。配置灵活和插件化拓展：可以定义自己的loaders和插件来满足团队个性化的需要。另外，webpack从最初1.0到现在5.x，官方迭代更新很快。
配置文件名称
webpack默认的配置文件：webpack.config.js
也可以通过webpack --config 指定不同环境下使用的配置文件的名称
webpack配置组成
module.exports = {
entry: './src/index.js',-------------------------打包的入口
output: './dist/main.js',------------------------打包的输出
mode: 'production',------------------------------指定打包环境
module: {
rules: [---------------------------------------loader配置
{test: /\.txt/, use: 'raw-loader'}
],
},
plugins: [---------------------------------------插件配置
new HtmlwebpackPlugin({
template: './src/index.html'
})
]
}module零配置的webpack（默认）会指定entry（'./src/index.js'）和output（'./dist/main.js'）
环境搭建
安装Node.js和npm
webpack依赖Node.js环境
检查是否安装成功：node -v和npm -v
创建空目录和package.json文件
npm init -y
安装webpack和webpack-cli
webpack4是将webpack的内核和webpack-cli进行了分离，因此在实际使用中需要同时安装webpak和webpack-cli
npm install webpack webpack-cli --save-dev
检查安装是否成功：webpack -v
通过npm script运行webpack
{
"name": "webp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.53.0",
"webpack-cli": "^4.8.0"
}
}
原理：模块局部安装会在node_modules/.bin目录创建软连接