高级知识点（webpack）

webpack

loader是什么？

Loader本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。因为Webpack只认识JavaScript，所以Loader就成了翻译官，对其他类型的资源进行转译预处理工作。

loader在module.rules中配置：test和use。test可接收一个正则表达式，只有正则匹配上的模块才使用这条规则；use可接收一个数组，数组包含该规则所使用的loader。

常见的loader：

• file-loader 使得我们可以在JS文件中引入png\jpg等图片资源
• url-loader 跟file-loader类似；唯一不同的是在于用户可以设置一个文件大小的阈值，当大于阈值时跟file-loader一样返回publicPath，而小于该阈值时则返回文件base64形式编码。
• style-loader css-loader 其中css-loader处理js中import require() @import/url 引入的内容；style-loader 负责把样式插入到DOM中，方法是在head中插入一个style标签，并把样式写入到这个标签的 innerHTML里。
• sass-loader 把scss转成css
• less-loader 把less转成css
• babel-loader 中间桥梁，通过调用babel/core中的api来告诉webpack要如何处理 js。
  • babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
  • @babel/core是babel的核心库，所有的核心API都在这个库里，这些API供babel-loader调用
  • @babel/preset-env 最主要的配置字段是 useBuiltIns 和 target；target表示所要编译的代码运行环境，可以是浏览器，可以是node。只要设置相应的字段，他就能根据规则和转义相应的语法跟API。useBuiltIns：不需要手动 import ‘@babel/polyfill’; 业务代码使用到的新的API按需进行polyfill。

  "@babel/env",
    {
      targets: {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 
        //表示兼容市场占有率>1%，浏览器的最新两个版本，ie8以下不兼容
      },
      useBuiltIns: "usage",
    },
  复制代码

  • @babel/preset-env只是提供了语法转换的规则，但是它并不能弥补浏览器缺失的一些新的功能。

  原始代码： 只是@babel/preset-env 配置了@babel/polyfill “useBuiltIns”: “usage”

自定义loader segmentfault.com/a/119000001…

Plugin

Plugin 就是插件，基于事件流框架 Tapable，插件可以扩展Webpack的功能，在Webpack运行的生命周期中会广播出许多事件，Plugin可以监听这些事件，在合适的时机通过Webpack提供的API改变输出结果。

常用的plugin：

• html-webpack-plugin 自动生成HTML5文件，并引入webpack打包好的 js 等文件。
• clean-webpack-plugin 用于打包前先把dist文件夹清空
• hot-module-replacement-plugin 模块热替换插件，即HMR，webpack4 自带插件，无需安装，在开发模式下配合 devServer 使用
• mini-css-extract-plugin 将CSS提取到单独的文件中，类似功能的有 extract-text-webpack-plugin （webpack4 已废弃）。两者相比，mini-css-extract-plugin 的优点：
  • 异步加载
  • 没有重复的编译（性能）
  • 更容易使用
  • 特定CSS
• PurgecssPlugin 可以去除未使用的 css, 一般与glob、glob-all 配合使用。
• optimize-css-assets-webpack-plugin 用于 CSS 压缩
• commons-chunk-plugin 用于提取 js 中公共代码（webpack4 已废弃）
  插一句：公共模块代码的提取好处：开发过程中减少了重复模块打包，可以提升开发速度；减小整体资源体积；合理分片后的代码可以更有效地利用客服端缓存。
• split-chunks-plugin 用于提取 js 中公共代码。webpack4 内置插件。相比于 commons-chunk-plugin 的优点：
  • 从命令式到声明式
  • 优化了 commons-chunk-plugin 在异步提取公共模块代码的问题（不能正确提取异步代码的公共模块）。
• webpack-bundle-analyzer 可视化 webpack 输出文件的体积