Webpack5 第五节

代码映射Source Map定位问题

Source Map:源代码和构建后代码的映射。为了当项目运行出现问题或者报错时,通过控制台能够快速定位到具体出错的代码

配置

复制代码
devtool:"source-map"

推荐配置

复制代码
devtool:"eval-cheap-module-source-map"
  • eval 具有最好的性能,但并不能帮助你转译代码。
  • cheap 配置的map 质量会稍微差一点(保留行报错,没有列报错),但是不影响问题定位,还可以提高性能
  • module 包含第三方模块的报错

深入理解Tree Shaking

  • Tree Shaking(摇树)
    • 描述移除 JavaScript 上下文中的未引用代码
      • 函数return后的代码
      • 只声明未使用的代码
      • 只引入未使用的代码
  • 注意
    • Tree-shaking只对ES Module规范的模块起作用
    • 针对静态结构进行分析,只有import和export是静态的导入和导出。而commonjs有动态导入和导出的功能,无法进行静态分析。
  • 与Source Map有兼容问题
    • devtool 只能设置以下四种

      devtool:source-map | inline-source-map | hidden-source-map | nosources-source-map

    • eval 模式是将 js 输出为字符串不是 ES Modules规范,导致Tree Shaking失效
  • 使用

    • 生产模式
      • 自动开启
    • 开发模式
      • usedExports

      const TerserPlugin=require('terser-webpack-plugin')
      optimization:{
      // 标记未使用的代码
      usedExports:true,
      // 删除已经标记未使用的代码
      minimize:true,
      minimizer:[new TerserPlugin()]
      }

      • sideEffects
  • 副作用

    • 引入一个模块,调用了模块中的函数,或者修改当前模块、全局的数据,就有副作用
      • 修改全局的变量
      • 在原型上扩展方法
      • css的引入
  • 开启副作用

    optimization:{
    // 开启副作用标识
    sideEffects:true,
    }

  • 标识代码是否有副作用

    // package.json
    "sideEffects":false (告诉webpack所有代码都没有副作用)
    "sideEffects":true (告诉webpack所有代码都有副作用)
    "sideEffects":['xxx.js','*.less'](告诉webpack哪些有副作用,不移除)

webpack中的缓存

  • babel缓存
    • 特点
      • 第二次构建时,会读取之前的缓存
    • 配置

      use:[
      options:{
      cacheDirectory:true
      }
      ]

  • 文件资源缓存

    • 配置webpack哈希值
      • hash
      • chunkhash
      • contenthash

webpack中的模块解析和排除依赖打包

  • 模块解析
    • 配置

      // webpack.config.js
      resolve:{
      alias:{
      // 指定路径的别名
      '@':resolve('src')
      },
      // 自动解析模块的后缀名
      extensions: ['.js', '.json', '.less'],
      }

  • 排除依赖打包

    • 配置

      // webpack.config.js
      externals:{
      'jquery':'jQuery'
      }

      // index.

      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
相关推荐
wyzqhhhh2 天前
webpack
前端·javascript·webpack
吃饺子不吃馅4 天前
【八股汇总,背就完事】这一次再也不怕webpack面试了
前端·面试·webpack
萌萌哒草头将军4 天前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
weixin_405023374 天前
webpack 学习
前端·学习·webpack
八月ouc6 天前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
街尾杂货店&6 天前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
jiangzhihao05157 天前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
_孤傲_8 天前
webpack实现常用plugin
前端·webpack·node.js
Jonathan Star9 天前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
细节控菜鸡9 天前
Webpack 核心知识点详解:proxy、热更新、Loader与Plugin全解析
前端·webpack·node.js