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是最慢的，生成速度最快的，一般的生成效果作用也不大