webpack原理篇(五十五):webpack流程:准备阶段

简介: webpack原理篇(五十五):webpack流程:准备阶段

说明

玩转 webpack 学习笔记



准备阶段

webpack 的编译都按照下面的钩子调用顺序执行


77c2c091d27f4cc98db0f1539a7a8ccd.png



WebpackOptionsApply

WebpackOptionsDefaulter 做一些初始的操作

64fe6ff5a6474dc598694844196a1f5b.png


设置一些参数

3a60fd0b49964862a6093d3fff7ba427.png



再看看 NodeEnvironmentPlugin my-project\node_modules\webpack\lib\node\NodeEnvironmentPlugin.js

e9d33a73ac804170a11a9a98a796940c.png


可以看到在 entry-option 跟 run 之间有个 beforeRun,用于清理构建的缓存

9555aabd0a184f2dad2604fd1e1ad84e.png


下面使用命令找到 entryOption,这里使用 git bash 工具执行下面命令

grep "entryOption" -rn ./node_modules/webpack


328b569ec2df4340bdd9289b2789c531.png


然后找到 WebpackOptionsApply 的 291 行


992c8219ff004068bc54a9b293aa5d05.png


WebpackOptionsApply 将所有的配置 options 参数转换成 webpack 内部插件


使用默认插件列表


举例:(设置 ->开启)


   output.library -> LibraryTemplatePlugin

   externals -> ExternalsPlugin

   devtool -> EvalDevtoolModulePlugin, SourceMapDevToolPlugin

   AMDPlugin, CommonJsPlugin

   RemoveEmptyChunksPlugin



监听 entryOption 的地方,比如:

ebdcdd2e2fad408088489e8373eebc5f.png

8a6ddae5fcd8462f93252c542e4d4aa4.png



目录
相关文章
|
21天前
|
监控 前端开发 JavaScript
Webpack 中 HMR 插件的工作原理
【10月更文挑战第23天】可以进一步深入探讨 HMR 工作原理的具体细节、不同场景下的应用案例,以及与其他相关技术的结合应用等方面的内容。通过全面、系统地了解 HMR 插件的工作原理,能够更好地利用这一功能,为项目的成功开发提供有力保障。同时,要不断关注技术的发展动态,以便及时掌握最新的 HMR 技术和最佳实践。
|
21天前
|
缓存 前端开发 JavaScript
Webpack 动态加载的原理
【10月更文挑战第23天】Webpack 动态加载通过巧妙的机制和策略,实现了模块的按需加载和高效运行,提升了应用程序的性能和用户体验。同时,它也为前端开发提供了更大的灵活性和可扩展性,适应了不断变化的业务需求和技术发展。
|
21天前
|
缓存 前端开发 JavaScript
webpack 原理
【10月更文挑战第23天】Webpack 原理是一个复杂但又非常重要的体系。它通过模块解析、依赖管理、加载器和插件的协作,实现了对各种模块的高效打包和处理,为现代前端项目的开发和部署提供了强大的支持。同时,通过代码分割、按需加载、热模块替换等功能,提升了应用程序的性能和用户体验。随着前端技术的不断发展,Webpack 也在不断演进和完善,以适应不断变化的需求和挑战。
|
1月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
|
2月前
|
JavaScript 前端开发
手写一个简易bundler打包工具带你了解Webpack原理
该文章通过手写一个简易的打包工具bundler,帮助读者理解Webpack的工作原理,包括模块解析、依赖关系构建、转换源代码以及生成最终输出文件的整个流程。
|
3月前
|
缓存 前端开发 JavaScript
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
Webpack 模块解析:打包原理、构造形式、扣代码补参数和全局导出
135 1
|
3月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
49 0
|
5月前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
62 3
|
6月前
|
API 开发工具 开发者
webpack热更新原理
Webpack的Hot Module Replacement(HMR)提升开发效率,无需刷新页面即可更新模块。开启HMR需在配置中设`devServer.hot: true`。Webpack构建时插入HMR Runtime,通过WebSocket监听并处理文件变化。当模块改变,Webpack发送更新到浏览器,HMR Runtime找到对应模块进行热替换,保持应用状态。开发者可利用`module.hot` API处理热替换逻辑。
|
6月前
|
前端开发 测试技术 开发者
深入理解 Webpack 热更新原理:提升开发效率的关键
深入理解 Webpack 热更新原理:提升开发效率的关键