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.