Webpack的作者:Tobias Koppers
webpack
是为了实现code splitting
,帮助大型 web
应用提升性能。
Webpack
本质是模块
打包程序,只识别javaScript
语言。在开发一个应用的时会用到各种各样的第三方模块,通过 Webpack
可以将这些模块抽离到一起形成一个模块。但是当项目特别巨大的时候,如果只要一个包那么首次加载的时候肯定很慢,所以可以利用 Webpack
进行代码拆分,实现 web
项目的按需加载。对于多页面入口来说,一个入口就生成一个模块,对于单页面来说,可以对路由进行懒加载操作,实现一个路由打包成一个模块。
Webpack
模块有外部依赖关系的,对 webpack 来说都是模块,如:
import
语句require()
语句define
和 require
语句@import
语句。url(...)
)或 HTML 文件(img src=...
)中的图片链接(image url)entry
:让 Webpack
知道从哪里开始来构建其内部依赖图。output
:输出打包出来的文件的位置。loader
:将非 JavaScript
文件的模块编译成webpack 能够有效处理的模块。plugins
:做一些范围更广的任务,如压缩代码、抽离 CSS
文件、HTML
文件等。Webpack
使用 enhanced-resolve 来解析文件路径,resolver
帮助 webpack
找到 bundle
中需要引入的模块代码。
引入绝对路径时,不需要额外解析
相对路径解析
import "../src/file1";
import "./file2";
resolve.extensions
选项作为文件扩展名来解析package.json
的 main
字段index.js
模块路径
import "module";
import "module/lib/file";
resolve.modules
中指定的所有目录内搜索。resolve.alias
可以用来替换路径node_modules
文件夹resolve.extensions
选项作为文件扩展名来解析package.json
文件,则按照顺序查找 resolve.mainFields
配置选项中指定的字段package.json
文件不存在或者 package.json
文件中的 main 字段没有返回一个有效路径,则按照顺序查找 resolve.mainFiles
配置选项中指定的文件名Webpack
打包编译后的代码,import
或者 require
会转化为 __webpack_require__
manifest
包含了runtime
候的基础公共依赖。在浏览器运行时,Webpack
用来连接模块化的应用程序的所有代码。runtime
在模块交互时,连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑。
原文:https://www.cnblogs.com/seny-33/p/12153319.html