高级知识点(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 输出文件的体积
官方公众号
© 版权声明
THE END
本站需要你的支持
点赞2 分享
留言区 抢沙发
头像
你想留点啥?问点啥?
提交
头像

昵称

取消
昵称表情图片