webpack笔记
webpack打包原理
我们每一个单独的模块,都会在webpack打包之后,挂载到__webpack_require__下面的属性下,从而实现了模块的私有作用域。
工作模式
分为三种工作模式,development/production/none,默认是production,none表示以最原始的状态打包代码,文档中没有写该值
none模式,只是简单的进行模块挂载,development模式是通过eval进行模块挂载,production模式直接启用最小化压缩
配置文件
webpack可以通过命令行加路径参数的形式启动,也可以通过配置文件的方式启动,当在命令行输入webpack时,会默认寻找当前目录中是否有webpack.config.js,如果有,执行该配置文件中的配置信息
如果命令行中输入了参数信息,而配置文件中同样有该配置的配置信息,命令行中的参数信息,优先级比配置文件中的优先级更高
loader
webpack的内置loader,只能用来处理js文件,如果要使用其它类型的资源打包,需要配置对应的loader
css-loader的作用是将css文件转化为js模块,具体转化过程由css-loader实现,最终挂载到__webpack_require__下面,由webpack负责
style-loader的作用是将css-loader转化之后的结果,通过在document中创建style标签的方式添加到页面上,如果配置了多个loader,loader的执行顺序是数组的从后往前
webpack使用loader的方式
分为三种方式,第一种是通过配置文件的方式,即在webpack.config.js中的module的rules字段进行配置,该方式是官网推荐的loader使用方式;第二种是通过内联的方式,通过在import中,显示的指定loader,如:
import Styles from 'style-loader!css-loader?modules!./style.css' 内联的配置方式,优先级会高于配置文件的配置方式;第三种是通过命令行的方式,如:webpack --module-bind 'css=style-loader!css-loader'
webpack模块加载器分类(loader)
编译转换类:会将我们加载到的资源模块,转化为js代码,如:css-loader
文件操作类:将我们加载到的资源模块拷贝到输出目录,同时将文件的访问路径向外导出,如:file-loader
代码检查类:对我们加载到的资源文件进行校验,如: eslint-loader
webpack模块加载方式
遵循ES Module标准的import声明
遵循CommonJs标准的require函数
遵循AMD标准的define函数和require函数
样式代码中的@import指令和url函数
html代码中图片标签的src属性
如果使用require导入的是ES Module标准的库,需要的使用方式为const A = require('A').default
webpack核心工作原理
webpack根据我们的配置,找到打包入口,然后顺着入口文件中的代码,根据import或者require之类的文件导入语句,解析推断出文件所依赖的资源模块,再根据依赖的资源模块继续解析,最终形成一个依赖树,webpack会递归这个依赖树,找到对应的资源文件,根据我们配置的module中的rules属性,找到模块对应的加载器,也就是loader,交给加载器去加载这个模块,将加载到的结果,放入output中配置的打包结果中,从而实现整个项目的打包
loader的工作原理
sourceMap的作用
用于表示转换之后的代码和转换之前的代码的映射关系
sourceMap解决了源代码与运行代码不一致所产生的调试的问题
sourceMap相关配置,在devtool配置项中
webpack支持12种不同的sourceMap方式,每种方式生成的sourceMap的效果和生成sourceMap的速度,是不一样的,一般生成效果最好的,生成的sourceMapsud是最慢的,生成速度最快的,一般的生成效果作用也不大