webpack 学习第一天 assetModules 和 source-map的基础配置

webpack

modules

Asset Modules

1. asset/resource 将资源分割为单独得文件，并导出url，就是之前得file-loader得功能
2. asset/inline 将资源导出为dataURL （url（data:））(base64)的形式，之前的url-loader的功能
3. asset/source 将资源导出为源码（source code）（txt文件）之前的raw-loader功能
4. asset 自动导出为单独文件或者dataURL（默认8kb）之前有url-loader设置asset size limit限制实现
   

devtool

规则[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

inline、eval：不会生成外部source文件且构建速度更快；

hidden、nosources、cheap、cheap-module、source-map：会生成外部source-map文件，所以构建较慢

inline和eval的区别：inline只生成一个内联soruce-map文件，eval每一个文件生成一个source-map文件

cheap：精确到行，无法精确到列.

1. eval: mode为development时，devtool的默认值，优点：构建快，缺点：映射到转换后的代码，无法准确定位到源码位置
2. eval-cheap-source-map: 定位不到源码，可以定位到转换后代码位置行
3. eval-source-map 定位不到源码，可以定位到转换后代码位置行和列（vue react 脚手架使默认使用）
4. cheap-module-source-map 生成没有列信息的source-map 可以准确定位到源码的行
5. inline-source-map 可以精准锁定源代码位置（行和列）
6. source-map 功能最完全，但会减慢打包速度，可精准定位源码的行和列
7. hidden-source-map 无法锁定源代码位置；目的：隐藏源代码
8. nosources-source-map 无法锁定源代码位置；目的：隐藏源代码