原创不易,未经作者允许禁止转载!!
Webpack初体验
Webpack会被Vite取代吗?
关于Vite的思考
webpack
npx webpack --entry ./src/main.js --output-path ./build
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "build"),
},
};
webpack --config ./wk.congfig.js
webpack到底是如何对我们的项目进行打包的呢?
Mode配置代表配置了更多
这个过程核心完成了 「内容转换 + 资源合并」 两种功能,实现上包含三个阶段:
单次构建过程自上而下按顺序执行,下面会展开聊聊细节,在此之前,对上述提及的各类技术名词不太熟悉的同学,可以先看看简介:
Entry
:编译入口,webpack 编译的起点Compiler
:编译管理器,webpack 启动后会创建 compiler 对象,该对象一直存活知道结束退出Compilation
:单次编辑过程的管理器,比如watch = true
时,运行过程中只有一个 compiler
但每次文件变更触发重新编译时,都会创建一个新的 compilation
对象Dependence
:依赖对象,webpack 基于该类型记录模块间依赖关系Module
:webpack 内部所有资源都会以“module”对象形式存在,所有关于资源的操作、转译、合并都是以 “module” 为基本单位进行的Chunk
:编译完成准备输出时,webpack 会将 module
按特定的规则组织成一个一个的 chunk
,这些 chunk
某种程度上跟最终输出一一对应Loader
:资源内容转换器,其实就是实现从内容 A 转换 B 的转换器Plugin
:webpack构建过程中,会在特定的时机广播对应的事件,插件监听这些事件,在特定时间点介入编译过程webpack 编译过程都是围绕着这些关键对象展开的,更详细完整的信息,可以参考 Webpack 知识图谱 。