一文彻底解决新手对 webpack 的恐惧！【上篇】

前言

首先抛出结论，webpack是一个非常简单的工具，毫无难度可言。webpack阻碍很多人的根本原因是大家对一些概念的不熟悉、对webpack丰富的loader和plugin望而怯步。当你把概念弄清楚后，你自然而然的就知道自己需要什么loader和plugin了。

看完后你一定会说：“就这？webpack就这？”。

个人建议：例如create-react-app就是一个很好的脚手架，你可以写不出这样的脚手架，但你一定要能看懂，在你有需要的时候有能力去修改源码。webpack掌握到这个程度很多时候就完全够用了。在最后我还会补充如何自己写一个loader和plugin（不过我相信不用到最后，认真阅读的你就已经知道要如何编写了）

准备环境、版本

node: ^12.16.1

webpack: ^4.44.2

webpack-cli: ^3.3.12

webpack5升级了一些新特性，所以我们这篇文章以目前常用的webpack4来讲解。不过完全不用担心都出5了怎么还学4的问题，道理都是相通的，4都会了，5它不就是多点新特性了吗

你必须知道的知识

1、webpack概念

webpack是一个现代JavaScript应用程序的静态模块打包器。如果你接触js够早的话，你一定知道最初的工程可没有这样的打包工具，一个文件就相当于一个模块，最终这些文件需要按照一定的顺序使用script标签引入html（因为如果顺序不对就会导致依赖变量丢失等错误问题）。

但是这个写项目不仅麻烦而且不优雅，随着node.js的出现和发展，才出现了这类基于node.js运行的打包工具（gulp、grunt，以及现在最流行的webpack），因为node.js拥有可对文件操作的能力。所以webpack本质就是为我们打包js的引用，而我们常听到各种loader、各种plugin、热更新、热模块替换等等都是webpack的一个升华，使得webpack能为我们提供更多的帮助。

• loader：webpack本身只能打包js和json格式的文件，但实际项目中我们还有css、scss、png、ts等其他文件，这时我们就需要使用loader来让它正确打包。
  总结: loader是处理编译js和json以外的文件时用的
  常见的loader：

style-loader  
css-loader  
sass-loader  
ts-loader  
file-loader  
babel-loader  
postcss-loader 
...

• plugin：plugin可以在webpack运行到某个阶段时候，帮你做一些事情，类似react/vue中的生命周期。具体的某个插件（plugin）就是在webpack构建过程中的特定时机注入扩展逻辑来改变构建结果，作用于整个构建过程。

弄明白这些东西

• postcss：postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具。你可以把他理解成babel，他本身作用不大，我们很多具体需求的实现都需要他的插件来完成，他本身更像一个平台。
  例如，项目中我们需要webpack自动的帮我们为css样式加上兼容性前缀，实际帮我们加上前缀的插件是autoprefixer，但他能为我们加前缀的前提又是我们有postcss。千万不要把postcss误解postcss成scss、less替代品.

• babel：babel 是一个 JavaScript 编译器，他可以让我们不再考虑兼容性，尽情的使用下一代的 JavaScript 语法编程。但是要实现具体的语法转换，我们还是要使用他的插件才能实现。
  在babel7后为我们提供了预设[5]，可以让我们不再自己麻烦的对插件进行组合，想在什么环境运行就写什么预设即可（相当于每个预设选项中都帮你组合好了这个环境中需要用到的插件）

• es6+语法：babel默认会转换语法，例如：let、const、() => {}、class

• es6+特性：babel不会转换特性(API)，特性需要js代码垫片来兼容低版本的浏览器。例如：Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise

• @babel/core：@babel/core是babel的核心库，所有的核心api都在这个库里，这些api可供babel-loader调用

• @babel/preset-env：这是一个预设的插件集合，包含了一组相关的插件，Bable中是通过各种插件来指导如何进行代码转换。该插件包含所有es6转化为es5的翻译规则

• @babel/polyfill：@babel/preset-env只是提供了语法转换的规则，但是它并不能弥补浏览器缺失的一些新的功能，如一些内置的方法和对象，如Promise，Array.from等，此时就需要polyfill来做js的垫片，弥补低版本浏览器缺失的这些新功能。注意：Babel 7.4.0该包将被废弃

• core-js：它是JavaScript标准库的polyfill，而且它可以实现按需加载。使用@babel/preset-env的时候可以配置core-js的版本和core-js的引入方式。注意：@babel/polyfill依赖core-js

• regenerator-runtime：提供generator函数的转码

补充知识点（重要）

• browserslist：browserslist实际上就是声明了一段浏览器的合集，我们的工具可以根据这个合集描述，针对性的输出兼容性代码，browserslist应用于babel、postcss等工具当中。
• browserslist可以在package.json文件配置，也可以单出写一个.browserslistrc文件进行配置
• 工具会自动查找.browserslistrc中的配置，如果没有发现.browserslistrc文件，则会去package.json中查找

// 在.browserslistrc中的写法  
> 1%  
last 2 versions  

// 还可以配置不同环境下的规则（在.browserslistrc中）  
[production]  
> 1%  
ie 10  

[development]  
last 1 chrome version  
last 1 firefox version  

// 在package.json中的写法  
{  
  "browserslist": ["> 1%", "last 2 versions"]  
}  

// 还可以配置不同环境下的规则（在package.json中）  
// production和development取决你webpack中mode字段的配置  
{  
  "browserslist": {  
  "production": [  
  ">0.2%",  
  "not dead",  
  "not op_mini all"  
 ],  
   "development": [  
   "last 1 chrome version",  
   "last 1 firefox version",  
   "last 1 safari version"  
  ]  
 }  
 }  

“> 1%”表示兼容市面上使用量大于百分之一的浏览，“last 1 chrome version”表示兼容到谷歌的上一个版本，具体的可以使用命令npx browserslist "> 1%"的方式查看都包含了哪些浏览器

执行 npx browserslist "> 1%"
chrome 100
chrome 99
edge 100
firefox 99
ios_saf 15.4
ios_saf 15.2-15.3
ios_saf 14.5-14.8
op_mini all
safari 15.4
samsung 16.0

• chunk：它不是库也不是插件，它就是一个名词，顾名思义就是代码块。为什么要单独把他拎出来说呢，因为你明白它以后你自然就能理解webpack中配置一些参数的意思了
• chunks：一个chunks至少包含一个chunk，chunks是多个chunk的合集
  上面代码来说，a.js就是chunk，而index.js就是chunks

在webpack构建中入口是chunks，出口是chunk（知道这个概念就行）