《Webpack实践入门、进阶与调优》第二版

何为Webpack？

Webpack是一个开源的JavaScript模块打包工具，最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个或多个JS文件。这个过程就叫模块打包。

为什么需要Webpack?

一个简单的web应用其实一个浏览器一个编辑器就可以了，但是随着应用规模变大，人工维护成本提高成倍提高，需要借助一定的工具提高效率，为什么选择webpack打包，因为具备以下优点：

• 1） 默认支持多种标准，包括AMD，CommonJS，以及ES6模块；
• 2） 有完备的代码分片解决方案；代码分片字面意思理解就是，他可以分割打包后的资源，在首页只加载必要的部分，将不太重要的功能放到后面动态加载。这对于资源体积较大的应用来说尤为重要，可以有效的减小资源体积，提升首页渲染速度。
• 3） 可以处理各种类型的资源，除了JavaScript外，还可以处理样式、模板、图片等；
• 4） 拥有庞大的社区支持。

Vue项目如何打包？

• 1、手动搭建vue项目手动搭建vue项目，配置文件在webpack.config.js
• 2、通过@vue/cli搭建项目通过脚手架搭建vue项目，工程目录中不会有webpack的任何配置文件。Vue提供的命令行工具是基于webpack做的封装，开箱即用。如若开发者想要修改webpack配置，vue提供了方法，在工程目录下创建vue.config.js，添加配置。

资源的输入输出

• 资源处理流程：指定一个或者多个入口（entry），告诉webpack具体从源码目录下的哪个文件开始打包。存在依赖关系的模块会在打包的时候被封装为一个chunk。Chunk字面意思代码块，在webpack中可以理解成被抽象和包装后的一些模块。

• Chunk字面意思代码块，在webpack中可以理解成被抽象和包装后的一些模块。Webpack会从入口文件开始检索，并将具有依赖关系的模块生成一颗依赖树，最终得到一个chunk。我们一般将由这个chunk得到的打包产物成为bundle。三者之间的关系如下图所示：

  
  
  bundle
  bundle

• 工程中可以定义多个入口，每一个入口都会产生一个结果资源。因此，我们可以说entry和bundle存在对应关系。一些特殊情况下，一个入口也可能产生多个chunk并最终生成多个bundle，例如分片。

• 1）资源入口：context和entry两个配置项。 context可以理解为资源入口的路径前缀，在配置 要求必须使用绝对路径的形式。context的目的是让entry的编写更加简洁。
  举例：
  工程路径 /src/script/index.js
  context:path.join(__dirname,‘.src/script’)
  entry:‘./index’

• 2）资源出口：配置项在output对象中，该对象中包含数十个配置项，大多不常用，常用的有

• filename，控制输出资源的文件名，多入口的场景中，需要为对应产生的每个bundle指定不同的名字。

• path，指定资源输出的位置，必须是绝对路径，webpack4之后output.path默认是dist目录，除非需要修改，否则不必单独配置。

• publicPath，指定资源请求的位置。由JS或CSS请求的间接资源路径。页面中的资源分两种，一种是有由HTML页面直接请求的，比如通过script标签加载的js;另一种是由js或者css来发起请求的间接资源，如图片、字体等。PublicPath的作用就是请求这部分间接资源的。（重要）

• 注意：webpack-dev-server的配置中也有一个publicPath，但是这个是指静态资源服务路径。

代码分片

• 方式1：通过入口（entry）划分代码
  通常web应用中会有一些库和工具是不经常变动的，我们可以把它们放在一个单独的入口中。
• 方式2：公共模块的提取
  （CommonsChunkPlugin是webpack4之前内部自带的插件），webpack4之后是使用SplitChunks，将多个chunk中公共的部分提取出来。
  提取的好处：
  1） 开发过程中减少了重复模块打包，可以提升开发速度；
  2） 减少整体资源体积；
  3） 合理分片后的代码可以更有效地利用客户端缓存。
• 方式3：资源异步加载
  页面初期渲染的时候，不需要使用的资源，进行异步加载。