webpack 问题罗列

0. 什么是 Webpack？前端自动化构建工具，可实现模块打包、文件压缩、本地服务构建等操作

1. Webpack 的核心概念有哪些？Entry、Output、Loader、Plugins、Mode

2. 如何理解 Webpack 的 Loader 加载器？Webpack 默认只支持 Js、Json，其它文件需要 Loader。Loader 也是 Node 的模块，是函数，可接收参数并返回结果。以 xxx-loader 形式命名。

3. 模块全局安装与局部安装的差异与区别是什么？全局安装在团队协作当中会产生版本不同的问题。局部安装可利用 package.json 中的 scripts 属性进行快速启动。

4. 分别暴露、统一暴露、默认暴露的操作模式是如何的？export、export {}、export default

5. 通用引入、解构引入、简便引入的操作方式是如何的？import * as module from、import {module1,module2} from、import {default as module} from（import module from）

6. 开发指令与生产指令的操作及区别是什么？

   0. webpack 入口文件 -o 出口文件 --mode=development || production
   1. webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法
   2. 生产指令会压缩代码
   3. 不能编译打包 css、img 等文件以及将 es6 基本语法转化为 es5 语法操作

7. webpack.config.js 是否能使用 es6 的模块化语法？不能，只支持 CommonJS 语法，所以需要 mdoule.exports

8. output 中的 path 以及 filename 的路径如何设置？

   0. path 设置基本出口目录，利用 path.resolve 进行路径拼接，__dirname 以及相对路径的组合（不得使用绝对路径）。因为涉及到样式、图片等其它目录，所以只设置基本出口目录级别就可以。
   1. filename 设置出口文件相对路径。

9. 加载器的模块的执行顺序是什么？右侧为先。

10. less-loader、css-loader、style-loader 的功能作用各自实现什么？

    0. less-loader——将 less 文件解析成 css 文件
    1. css-loader——将 css 以 commonjs 方式整合到 js 文件中
    2. style-loader——创建 style 标签，添加上 js 中的 css 代码

11. 加载器规则中的 test、exclude、enforce、use 的作用是什么？匹配、排除、强制（pre 可优先）、使用模块

12. eslint 配置的主要属性你有哪些了解？parserOptions、env、globals、rules、extends 等，eslint-loader 中可以使用 airbnb 风格，需配置 enforce 属性，package.json 的 eslintConfig 等属性。

13. @babel/core、@babel/preset-env、babel-loader 各自的作用是什么？

    0. @babel/core 是 babel 的核心库
    1. @babel/preset-env 是 babel 的预设的工具包，默认可以将所有最新的语法转为为 ES5
    2. babel-loader 是 babel 在 webpack 中的 loader 包

14. Polyfill 模块的功能是什么？为旧浏览器提供它没有原生支持的较新的功能，解决 babel 只能转换语法的问题(如：let/const/解构赋值...)，引入 polyfill 可以转换高级语法(如:Promise...)

15. 样式文件中图片资源如何实现打包操作，使用什么模块？file-loader 以及 url-loader，url-loader 是对象 file-loader 的上层封装，使用时需配合 file-loader 使用。（webpack4）在webpack5中，可以利用asset/inline（行内）、asset/resource（外置）、asset（自动）进行配置。

16. Url-loader 中的 outputPath 与 publicPath 的差异与区别？outputPath 是文件本地输出路径，而 publicPath 是图片的 url 路径。

17. webpack 中如何处理 html？利用 html-webpack-plugin 插件进行配置，会自动引入 js 与 css，所以注意不要在 html 中引入任何 css 和 js 文件，以免产生二次引入的问题。

18. html-loader 的作用是什么？url-loader 只能处理 JS 和 CSS 中引入的图片，无法处理 HTML 中的 img 图片，需要 html-loader 处理。

19. 文件操作利用什么模块实现，比如字体文件？需要借助 file-loader 编译解析。

20. 自动编译打包运行 webpack-dev-server 的主要配置项内容包括哪些？运行方式是什么？

    0. output 中的 publicPath——添加 devServer 服务后需要调整输出的路径，建议设置绝对路径，css、img 等资源路径将会改变
    1. url-loader 规则配置中——删除 publicPath 配置
    2. devServer 配置——本地服务自动运行配置
    3. webpack-dev-server 命令来运行，在内存中进行操作，它不依赖打包出来的文件

21. 热模替换功能的注意事项有哪些？

    0. devServer 中需要添加 hot 属性为 true
    1. index.html 不能自动刷新的解决方法——新增一个入口，解决开启热模块替换后首页无法刷新的问题，入口文件从原来的字符串模式转成数组模式

22. devtool 的作用是什么？devtool 是 webpack 中的一个配置， 可以将压缩/编译文件中的代码映射回源文件中的原始位置，便于调试代码

    0. 推荐使用：

       • 开发环境： cheap-module-eval-source-map 定位到行，source-map 可定位到列
       • 生产环境： source-map 为 none

23. 依赖图

24. 开发及生产环境的配置

    0. 设置两份配置文件：webpack.dev.js、webpack.prod.js

    1. 生产环境 webpack.prod.js 中不需要 webpack-dev-server 配置，devtool 也可以进行删除，需要设置 mode 为 production，修改 output 中的 path 路径

    2. package.json 指令的修改

       0. dev：webpack-dev-server，用于开发环境，不打包文件
       1. build：webpack，用于生产环境，打包文件，打包后的 index.html 不能直接双击打开，需要启动服务

25. 打包文件夹结果的操作：访问的时候，一定不能直接打开 HTML 文件，要为这个文件夹创建一个静态资源服务，以当前的文件夹作为根目录才可以。可选择方式: live-server webpack-dev-server giao-server

26. 使用什么方式进行打包文件内容的清除？每次打包生成了文件，都需要手动删除，引入插件 clean-webpack-plugin 帮助我们自动删除上一次生成的文件。clean-webpack-plugin 与 vscode 结合使用时会出现无法删除的问题，关闭 vscode 在 cmd 命令行下运行命令进行打包。（webpack4），在webpack5中只需要在output中设置clean:true就可以了。

27. 如何将样式内容单独的进行抽取文件？利用 mini-css-extract-plugin 抽离 CSS 文件

    0. 引入插件
    1. 修改 less 或者 css 的规则配置，将 MiniCssExtractPlugin.loader，加到 use 使用项最左边，不再需要 style-loader
    2. 配置 MiniCssExtractPlugin 的插件内容

28. 兼容性内容需要考虑哪些方面？

    0. 利用 postcss-loader、autoprefixer 可实现 css 样式的兼容设置，需要在 less-loader 和 css-loader 的中间添加 postcss-loader，并设置 autoprefixer 的插件内容，因为需要在 css-loader 转换之前进行兼容性的操作处理

    1. 需要注意 browserslist 的配置选项，可以在 package.json 中添加 browserslist 属性节点也可以设置.browserslistrc 文件

    2. browserslist 配置规则

       规则	介绍
       > 1%	全球超过 1%人使用的浏览器
       > 5% in US	指定国家使用率覆盖
       last 2 versions	所有浏览器兼容到最后两个版本根据 CanIUse.com 追踪的版本
       Firefox > 20	指定浏览器的版本范围
       not ie <=8	排除 ie8 及以下
       Firefox 12.1	指定浏览器的兼容到指定版本
       since 2013	2013 年之后发布的所有版本
       not dead with > 0.2%	仍然还在使用且使用率大于 0.2%
       last 2 Chrome versions	最新的两个 Chrome 配置
       cover 99.5%	99.5% 的浏览器都是目标

    3. browserslist 也可以实现对 js 的兼容转换，是对 babel-loader 的功能扩展

29. 如何压缩 css 样式？optimize-css-assets-webpack-plugin（webpack4）css-minimizer-webpack-plugin（webpack5）

    0. 引入插件
    1. 配置 OptimizeCssAssetsPlugin 插件，可以进行所有注释移除、sourceMap 的生成等配置

30. 如何利用 core-js 进行按需加载的兼容处理？

    0. 给 babel-loader 的 options 加 presets，useBuiltIns、corejs、targets。

31. 如何压缩 js 与 html 文件？

    0. 产品模式下会自动压缩 js
    1. html 压缩可以利用之前的 html-webpack-plugin 设置 minify 属性，比如 collapseWhitespace、removeComments 等属性

32. Webpack 性能优化

    0. 开发环境：优化打包构建速度、优化代码调试
    1. 生产环境：优化打包构建速度、优化代码运行性能

33. 什么是 HMR，它与 Live-Reload 有什么区别，如何应用？

    0. HMR：Hot Module Replacement 热模块替换，一个模块发生变化，只会重新打包这一模块，极大提升构建速度

       0. 样式文件：可以使用 HMR，因为 style-loader 内部实现了

       1. Js 文件：默认不使用 HMR

          0. 解决：通过 module.hot 进行条件判断，解决非入口文件的热模替换

       2. HTML 文件：默认不使用 HMR，同时导致问题，不能够热更新

          0. 解决：将 entry 从字符串转成数组，添加 html 页面内容
          1. 事实上 HTML 不需要做 HMR

    1. devServer 开启 hot 为 true

34. OneOf 的作用是什么，有什么限制？只处理一个类型的加载器，提升打包速度，但同一种类型只能处理一个，要处理多个加载器只能将另外加载器抽离出 OneOf 之外进行 rules 配置。

35. 如何利用缓存进行性能优化？

    0. babel 缓存：cacheDirectory 设置为 true

    1. 文件资源缓存：

       0. fullhash 值文件名：js、css 使用同一 hash 值，重新打包会导致所有失效
       1. chunkhash：根据 chunk 生成 hash 值，如果打包来源于同一 chunk，那么 hash 值一样，但在 js 中引入 css，会被认为是同一个 chunk，导致 js 与 css 的 hash 名还是一样
       2. contenthash：根据内容来进行 hash 名的设置

36. tree-shaking 是什么，树摇能处理什么问题？

    0. tree-shaking 目的是去除无用代码，前提代码必须是 es6 分块模块化，并开始 production 模式
    1. 在 package.json 设置 sideEffects 为 false，所有代码都没有副作用，都可以执行 tree shaking，产生的问题是会把 css、@babel/polyfill （副作用）都干掉
    2. 修改 package.json 设置 sideEffects：["*.css"]

37. 如何实现代码分割？代码分割分为多种情况，单入口、多入口等不同的模式，contenthash、optimization、import、webpackChunkName 等技术点的应用是关键

38. 如何实现模块的懒加载与预加载？

    0. 懒加载：代码层次，利用 import().then 的方式进行模块的引入操作，可以利用 webpackChunkName 来进行更名
    1. 预加载：webpackPrefetch 设置为 true 可以实现预加载（等其它资源加载完毕，浏览器资源空闲的时候加载）

39. 如何将扩展类库抽离？利用 externals 属性，拒绝具体模块打包进来，可以另外使用 cdn 等操作。

40. 如何使用 dll 进行内容分隔？webpack.DllPlugin、output 的 library、webpack.DllReferencePlugin 以及 add-asset-html-webpack-plugin 的使用