webpack学习

jupiter1999
94 阅读6分钟

juejin.cn/post/684490… juejin.cn/post/684490…

Webpack的打包过程/打包原理/构建流程？

模块打包工具 本质是一个函数 生成一个complier对象控制整个webpack周期 每次构建模块时生成compliation上下文对象 image.png

  • 初始化option：从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。

  • 开始编译：用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译。

  • 确定入口：根据配置中的 entry 找出所有的入口文件。

  • 编译模块：从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。

  • 完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系树。

  • 输出资源：根据模块之间的依赖关系，组装代码块 chunk，再把每个 Chunk 转换成一个个单独的文件加入到输出列表。

  • 输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

  • 整个过程中webpack会通过发布订阅模式，向外抛出一些hooks，而webpack的插件即可通过监听这些关键的事件节点，执行插件任务，改变webpack的运行结果。

webpack源码中核心有两个对象：Compiler和Complation。

Compiler编译对象负责掌控webpack生命周期，不执行具体的任务，只是进行一些调度工作。比如执行模块创建、依赖收集、分块、打包等。

每次构建都会新创建一个Compilation实例，相当于上下文，包含了这次构建的基本信息。

Webpack的 vendor 和model 有什么区别吗？

Webpack 的 loader的作用？

loader是预处理器，负责文件转换，webpack只能识别JSON和js格式的文件，loader的作用是将非js格式的资源模块（如样式、图片等）转换成js格式的文件。

常见的loader

loader的执行顺序是右到左 下到上

样式资源

less-loader/scss-loader等:将less文件编译成css文件

css-loader:将css文件变成commonjs模块加载到js中，模块内容是样式字符串

style-loader: 创建style标签，将js中的样式资源插入标签内，并将标签添加到head中生效

图片、媒体、字体等资源

file-loader就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件url），并将文件移动到输出的目录中

url-loader 一般与file-loader搭配使用，功能与 file-loader 类似，如果文件小于限制的大小，则会返回 base64 编码，否则使用 file-loader 将文件移动到输出的目录中

js资源兼容

babel-loader preset预设@babel/preset-env @babel/core babel-loader将ES6/7/8语法转换为ES5语法 preset转义新api 如promise

js语法检查

eslint-loader

vue文件

vue-loader 用于解析.vue文件

webpack中plugin的作用？

plugin负责功能扩展，主要目的就是解决loader 无法实现的事情，比如打包优化和代码压缩等。 Plugin加载后，在webpack构建的某个时间节点就会触发plugin定义的功能，帮助webpack做一些事情。实现对webpack的功能扩展。

常见的plugin

html-webpack-plugin 处理html资源，默认会创建一个空的HTML，自动引入打包输出的所有资源（js/css）

mini-css-extract-plugin 该插件可以把css从打包输出的js文件中抽出成为单独的css文件

clean-webpack-plugin 每次打包时候，CleanWebpackPlugin 插件就会自动把上一次打的包删除

Webpack loader 和 plugin 的区别

loader作用是格式转换，将非js文件模块转换为webpack可以识别的js文件。loader的运行时间是编译时期。

plugin作用是功能扩展，在webpack的整个周期起作用，在特定时间点运行。

Webpack 做过哪些优化手段？有哪些优化手段？

juejin.cn/post/684490…

优化打包速度

1、开启多进程Loader转换：HappyPack、thread-loader

2、缩小打包作用域

配置exclude/include(确定 loader 规则范围) 配置alias别名 直接告诉webpack去哪个路径找 配置noParse忽略该文件对其他模块依赖的解析

image.png

3、压缩代码速度

webpack-paralle-uglify-plugin开启多进程并行压缩

4、分包

使用 DllPlugin 进行分包 方便按需加载（import()函数） juejin.cn/post/684490…

优化打包文件体积

1、Tree-shaking

tree-shaking可以删除没有使用过的模块 webpack4中设置mode为production的时候已经自动开启了tree-shaking，但必须是ES6语法的模块

2、压缩代码

css压缩 optimize-css-assets-webpack-plugin插件 js压缩 生产环境下自动压缩js 有插件uglifyjs-webpack-plugin html压缩 配置HtmlWebpackPlugin去除注释和空格

webpack的懒加载（组件异步加载）

懒加载的本质：按需加载，把代码分割成不同的代码块 在代码中所有被 import() 的模块，都将打成一个单独的模块，放在 chunk 存储的目录下。在浏览器运行到这一行代码时，就会自动请求这个资源，实现异步加载。

Webpack 插件的执行顺序（加载机制）？

Webpack中怎么实现组件异步加载?

Webpack如何配置压缩代码？压缩了什么？

使用tree-shaking需要注意什么？

webpack的核心概念

webpack的配置文件webpack.config.js

  • Entry:指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

  • Output:输出指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。

  • Loader:预处理器Loader让Webpack能够去处理非JavaScript文件，相当于翻译官（Webpack自身只理解JavaScript/json）

  • Plugins:插件可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

  • Mode:模式指示Webpack使用相应模式的配置

    • development开发环境：能让代码本地调式运行的环境
    • production生产环境：能让代码优化上线运行的环境

  • Module： 模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

  • Chunk 代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

  • Bundle 包文件 webpack输出的包文件即output

  • module chunck和bundle的关系

Module就是一个个文件，于是webpack 在打包处理这些模块时， 会根据文件引用关系生成 chunks 文件，处理好chunks文件后，就会输出bundle文件,这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。

生产模式和开发模式区别

开发模式不需要压缩代码 完整的sourcemap

生产模式需要考虑合理的sourcemap 和代码压缩

sourcemap .js.map 的文件（源代码映射）用于将生产环境中的压缩代码映射回原始的源代码 不能公开暴露

avatar
文章
阅读
粉丝