前言

最近十年，随着手机 挪动平板和可穿戴设施的疾速遍及，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目录创立软连贯