webpack

背景：之前粗略的学习过webpack，只是大概知道有这个东西，怎么用，其他深入一点的就不会了，面试了很多家，很多家都问了webpack的相关知识，但是我只能答出一点点，所以，必须要重新认真学习一下webpack。

我们写代码可能会使用es6、less、sass等等，但是浏览器可能还不支持，所以webpack的作用就是将这些文件进行解析，打包成浏览器能识别的文件。有几个部分，我们必须了解：entry，output，module，plugin，mode，devServer

entry：给webpack指明打包的入口文件(index.js)

output：告诉webpack，打包后的文件放到哪里去

module：写一些loader配置信息（解析文件），loader使用exclude 除去我们不想要打包的文件

plugin：webpack只是将代码进行打包，插件可以帮助我们做其他的事情：

1.帮我们将css代码抽取出来，形成一个文件

2.设置我们的html模板（打包出来的东西，被引入到模板中）

3.代码进行压缩（webpack，默认只能压缩js代码）等等

mode：设置我们的打包环境（development，production）

devServer：开发服务器，本地开发时，如配置端口号，代码是否压缩，是否自动打开浏览器等等

 

mode、chunk、bundle是什么？

mode就是我们编写代码的源文件

chunk就是代码块，入口文件里面有很多依赖的文件，所有的依赖的代码全部组合在一起就叫chunk

bundle就是打包生成的文件

 

性能优化：

1.oneOf：在有重复处理一类文件的loader中，如有两种loader处理.js文件，oneOf只会使用一种进行处理

2.缓存：需求：修改一个文件，其他文件不变，实现：打包时，使用了缓存，就只打包修改了的文件，其他的使用缓存的，加快第二次开始的构建速度；网络加载时，使用缓存，只加载修改了的文件，其他的依旧使用缓存

3.代码分割：webpack是将很多的代码写入到一个文件中，代码体积会很大，使用代码分割，减少文件的体积，加快加载的速度

4.懒加载：当我们需要使用时，才加载

5.预加载：在浏览器空闲的时候，偷偷加载，兼容性文件，慎用

6.PWA渐进式网络开发应用程序（离线访问）

 

其实vue-cli中集成了webpack，我们使用最多的是打包优化、请求代理