Webpack

提醒

1. 你可能在很多文章中看到过Webpack的核心配置是entry，output，plugins，loader。
2. 你也会听说过，webpack对于一般人来说不需要学，用到时去官网查就行。
3. 你可能会和我一样迷茫，既不知道什么时候会用到那些配置，也不知道怎么从配置中找到最佳实践
4. 那我觉得你应该看一下这篇文章，我并不会给你介绍有哪些配置，哪些是最佳实践。而是切实解决上述的这些疑问

新手的webpack之路

webpack是什么

• 定义：webpack是构建工具，借助esm提供的导入导出语法，进行静态分析，构建依赖图，合并所有js到一个文件中。
• 注意点：简单理解就是纯webpack只认识js文件中的导入导出语法，其余代码看作字符串原样复制。
• 问题：前端工程中即便不使用框架，原生的文件也有.css文件.html文件.js文件，三种不同类型的文件，然而webpack只认识.js文件，也只会将一个个的js文件拼接为一个js文件
• 思考：对于html文件和css文件怎么处理

webpack怎么处理非js文件

• 引述：上述我们说过原生的浏览器支持的是html，css，js文件，我们也提出了html和css文件是否需要处理，怎么处理的问题。
• 解答：现代化编程中，js由esm提供的导入导出来实现模块化编程，借助webpack实现拼接。而css早在css2就已经有了导入导出的能力可以拆分为不同的文件。 那如何拼接呢，借助webpack本身肯定是不行，需要借助css-loader
• 什么是loader：你可以把loader看作是一个纯webpack，只是不同的loader处理不同类型的文件
  • 可以借助loader编译任意资源，比如css，img，json，vue，jsx，xml，html等等。
• 哪些loader是最佳实践：查看官网，根据文件类型的不同对loader进行了分类。
  • 可以借助loader处理语法兼容性问题，比如js语法一般用babel-loader，css语法一般用postcss-loader等等
• 总结：模块化的写法是语言层面提供的，但是模块化后的文件想要处理（比如语法兼容），拼接就需要借助不同的loader实现。
• 思考：既然模块化语法是语言层面提供的，也就是说在浏览器是可以直接识别的，不需要拼接。那为啥我们要使用loader来拼接呢，你也可能听说过拆分打包后的文件为单独的chunk，简单理解就是拼接完后又拆开了。

重新定义webpack

• 引述：上述我们谈到webpack可以通过本身和loader的能力实现对不同类型的模块化文件拼接，处理。然而浏览器本身就认识模块化语法，并不需要拼接。
• 解答：对于模块化的文件拼接的需求，其实是历史遗留，在早期，js中没有模块化语法，社区出了许多模块化规范，比如amd，cmd，umd等。但其实浏览器本身不认识，为了使用模块化的写法，就需要一个工具去根据不同的模块化规范语法把这些小文件拼接为一个文件，去掉模块语法部分，这样浏览器就可以识别了。而对文件的兼容性处理其实一直都有，早期我们是自己编写补丁来实现兼容性，现在你可能听说过兼容性处理引入polyfill就行，其实本质就是别人写的补丁实现兼容性。
• 现代浏览器：现代浏览器对于语法的兼容性还是很好的，但是难免有些用户使用的老浏览器，为了保证语法兼容和体验一致，通常会采用补丁来进行语法降级处理。
• 思考：假如所有用户都采用最新的浏览器，那么我们是不是不需要拼接模块化语法为单个文件，没错，vite构建工具就是借助现代浏览器本身的模块化识别能力，将模块化文件直接传输，而不是打包后再传输，因此其以构建速度闻名
• 对比：谈到vite，我们来对比一下，你会发现vite仍有loader和plugin，也就是说仍然要处理兼容性问题。可以这么说，兼容性问题即便是现代浏览器也无法避免，因为不同的浏览器厂商对于新语法的支持速度是不一致的。
• 总结：webpack除了自身的构建js文件的能力，也提供了扩展能力，借助loader实现任意文件的构建，即，它是现代前端项目的一个强大的现代化构建工具。
• 思考：既然webpack的能力可扩展，配置多，我们要如何掌握呢。

如何学习webpack

• 引述：上述我们谈到，webpack是现代化构建工具集，拥有众多的配置项和各种可扩展的能力。那如何学习webpack呢，直接看webpack配置肯定是低效的，既理解不了为什么这么配置，也无法理解应用场景。甚至你可能都不知道webpack到底有哪些能力。
• 解答：
• 我们应该从自身的实际需求出发，然后去官网查找对应的说明文档。
• 在开始使用webpack前，可以阅读概念，来了解webpack的核心配置项作用。
• 了解核心概念后，可以开始按实际需求来查找，比如，我现在要在项目中使用webpack，就可以在官网的起步文章中找到具体安装使用的步骤
• 如何找到对应文章呢，请看下一篇，《以一个新手第一次用webpack打包项目的视角带你学习webpack》