前端面试-Webpack

Webpack简述

webpack 是模块化打包工具。 webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用 Plugin 来扩展 webpack 功能。

核心

entry：入口。需要多个入口文件的时候，写成一个对象
output：出口。即使入口文件有多个，也只有一个输出配置
loader：加载器。在 module.rules中配置，加载和解析非 JavaScript 文件，比如图片、字体图标、CSS文件等
plugin：插件。扩展 webpack 的功能，让 webpack 具有更多的灵活性。在 plugins 中单独配置。 类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入。

devtool

用作调试

• source-map：映射代码错误，在源代码中提示错误，会生成.map映射文件
• inline：不会生成.map文件，但会将内容放在打包目标文件下
• cheap：代码错误提示仅限行，有利于提高打包速度
• module：提示 node_nodules 的代码错误
• eval：通过 eval 方式，不会生成 .map 文件，打包速度最快，但提示不全 cheap-module-eval-source-map - development模式下推荐
  cheap-module-source-map - production 模式下推荐

bundle、chunk、module

• bundle：webpack 打包出来的文件
• chunk：webpack 在进行模块的依赖分析的时候，代码分割出来的代码块。
• module：是开发中的单个模块

常见 loader

• file-loader： 打包图片，字体图标等资源文件
• url-loder： 和 file-loader 类似，可以把图片转换成base64
• style-loader：把 CSS 插入到 DOM 中
• css-loader：对 @import 和 url() 进行处理
• babel-loader：ES6 转 ES5
• sass-loader： 处理 Sass/SCSS 文件
• postcss-loader

常见 plugin

• html-webpack-plugin：创建HTML文件，并把对应的js文件引入
• clean-webpack-plugin：自动清除上次打包生成的文件夹
• copy-webpack-plugin：将文件或文件夹拷贝到打包目录
• mini-css-extract-plugin：将 CSS 提取到单独的文件中
• optimize-css-assets-webpack-plugin：压缩 CSS 文件
• uglifyjs-webpack-plugin： 压缩 JS 文件

webpack 优化前端性能

• 压缩代码。压缩 JS 文件。压缩 css文件
• 利用CDN加速。将引用的静态资源路径修改为 CDN 上对应的路径。利用 output 参数和各 loader 的publicPath 参数来修改资源路径
• 去掉不必要的插件
• 按需引入组件库
• vue-router 路由懒加载

Tree-shaking

只打包引入的模块，去除未使用的模块，可以帮助优化包体积，提高打包速度
开启 optimization.usedExports 即可。usedExports 可以标记模块导出的成员是否被外部使用

代码分割

将代码拆分，输出多个js文件，提高性能。
1、同步代码：一般情况下在 optimization.splitChunks 中配置就可以了
2、异步代码：无需做任何配置，会自动进行分割

提高webpack的构建速度

• 根上 webpack 版本的迭代
• 使用 Tree-shaking
• extensions、alias配置合理，不宜过多
• plugin 尽可能精简并确保可靠
• 在尽可能少的模块上应用 loader：合理使用 include 和 exclude 约定文件夹

Webpack 的热更新（HMR）

webpack 的热更新依赖于 HotModuleReplacementPlugin 插件
热加载原理：编辑器文件更改保存后，webpack 重新构建模块后将旧模块替换为新模块