webpack相关

最新推荐文章于 2022-10-20 21:15:20 发布
转载 最新推荐文章于 2022-10-20 21:15:20 发布 · 131 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.jianshu.com/p/e80d38661358

探讨Webpack4引入的mode参数、rules替代loaders、优化公共代码提取等新特性，及如何利用这些特性优化前端性能。
webpack3和webpack4的区别
  1. mode/–mode参数
    新增了mode/–mode参数来表示是开发还是生产（development/production）
    production 侧重于打包后的文件大小，development侧重于goujiansud
  2. 移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）
  3. 移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
  4. 支持es6的方式导入JSON文件，并且可以过滤无用的代码
  5. 升级happypack插件（happypack可以进行多线程加速打包）
  6. ExtractTextWebpackPlugin调整，建议选用新的CSS文件提取kiii插件mini-css-extract-plugin，production模式，增加 minimizer
loader 和 plugin 不同
  1. loader是使webpack拥有加载和解析非js文件的能力
  2. plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果
webpack构建流程
  1. 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
  2. 开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译
  3. 确定入口，通过entry找到入口文件
  4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
  5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
  6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
  7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中
    在以上过程中，webpack会在特定的时间点广播出特定的事件，插件在舰艇感兴趣的事件后会执行特定的逻辑，改变webpack的运行结果
如何利用webpack来优化前端性能
  1. 压缩代码。uglifyJsPlugin 压缩js代码， mini-css-extract-plugin 压缩css代码
  2. 利用CDN加速，将引用的静态资源修改为CDN上对应的路径，可以利用webpack对于output参数和loader的publicpath参数来修改资源路径
  3. 删除无用代码（tree shaking），css需要使用Purify-CSS
  4. 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
什么是bundle，什么是chunk，什么是module

bundle:有webpack打包出来的文件
chunk：webpack在进行模块的依赖分析的时候，代码分割出来的代码块
module:开发中的单个模块

happyPack开启多线程loader转换

运行在node.js之上的webpack时单线程模型，也就是只能一个一个文件进行处理，不能并行处理，happypack可以将任务分解给多个子进程，最后将结果发给主进程，js是单线程模型，只能通过这种多线程的方式提高性能

webpack面试题
fmk1023的博客
03-15 389
1.你知道webpack的作用是什么吗？
webpack、vite、rollup区别
ll_883963的博客
07-05 1030
在之前的浏览器中没有模块化的设计，所以期望把所有源代码编译进一个 js文件中提供给浏览器使用，所以在开发中当我们运行启动命令的时候，webpack 总是需要从入口文件去索引整个项目的文件，编译成一个或多个单独的js 文件，即使采用了代码拆分，也需要一次生成所有路由下的编译后文件（这也是为什么代码拆分对开发模式性能没有帮助）。通过插件和工具的组合来处理Vue文件的各个部分（模板、样式、脚本），将它们转换为浏览器可识别的格式，并最终生成最小化、优化的打包文件。
webpack 面试题
王亮的博客
10-20 685
webpack 常见面试题
webpack-config-reload:热加载 webpack 配置。修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server
05-05
修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server，比较方便的是在调试 webpack 繁琐的配置时候，省去一遍遍地 Ctrl+c 和重复输入命令。 注意：只支持 webpack/webpack-dev-server 两个命令。 安装...
webpack相关图片压缩插件
06-20
由于这几个图片压缩的插件下载会经常失败，所以我整理了一下。 文件内容： ...配合我之前发布的webpack基本配置、react webpack配置和vue webpack配置使用。 详情请访问：https://blog.youkuaiyun.com/qq_45142260
前端面试题之webpack相关题集.zip
06-21
这个压缩包文件“前端面试题之webpack相关题集.zip”显然包含了针对 Webpack 的面试问题集合，旨在帮助开发者准备相关的面试。 Webpack 的核心概念主要包括： 1. **入口（Entry）**：这是构建流程的起点，定义了...
Webpack相关资源类库和工具汇总
08-10
12. **awesome-webpack**：这个资源库可能包含了各种与 Webpack 相关的最佳实践、插件、loader 和指南，是学习和查找 Webpack 相关资源的好地方。 Webpack 的强大在于其灵活性和可扩展性，通过合理的配置和插件选择...
webpack相关.md
11-22
webpack相关.md
webpack 面试题
Shirley_0513的博客
08-10 415
一百〇二、webpack 和 gulp 对比 Gulp 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与 压缩、mock 数据等功能的一个前端自动化构建工具。说的形象点，“Gulp 就像是 一个产品的 流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管 理。”另外，Gulp 是通过 task 对整个开发过程进行构建。 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照 依赖和规则打包成符合生产环境部署的前端资源。还可以
Webpack 面试题
明天也要努力的博客
09-21 1032
1. webpack 打包原理 把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。 2. webpack 的优势 （1） webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移； （2）能被模块化的不仅仅是 JS 了； （3）开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等； （4）扩展性强，插件机制完善； 3. 什么是 loader，什么是 plugin ? loa
webpack相关面试题
最新发布
05-08
### Webpack 面试题整理 #### 1. Webpack 的核心概念是什么？ Webpack 是一种模块打包工具，其核心目标是将 JavaScript 应用程序中的静态资源视为模块，并对其进行打包处理以便于浏览器使用。它的核心概念包括入口（Entry）、出口（Output）、Loader 和 Plugin[^4]。 - **入口（Entry）**: 定义应用程序的起点，通常是一个或多个 JavaScript 文件。 - **出口（Output）**: 指定打包后文件的输出位置和名称。 - **Loader**: 负责将非 JavaScript 文件转换为可被 Webpack 处理的形式，例如通过 `babel-loader` 将 ES6+ 语法转译为兼容性更好的代码[^2]。 - **Plugin**: 提供更强大的功能扩展能力，用于完成 Loader 无法实现的任务，如优化、压缩、清理旧包等操作[^3]。 #### 2. Webpack 中 Loader 和 Plugin 的区别是什么？ Loader 主要负责文件的转换工作，能够使 Webpack 支持多种类型的文件加载与解析；而 Plugin 则侧重于对整个构建过程的功能增强，能够在特定的时间节点触发事件来修改构建流程或结果。简单来说： - **Loader**：专注于单个文件的转换，配置在 `module.rules` 下。 - **Plugin**：提供全局范围内的功能扩展，配置在 `plugins` 数组中[^2]。 #### 3. Webpack 的打包原理是什么？ Webpack 通过对项目结构进行分析，识别出所有的依赖关系树，然后按照这些依赖逐步解析各个模块的内容。对于非标准的 JavaScript 文件（如 Sass 或 TypeScript），会利用指定的 Loader 进行预处理后再纳入到最终的打包产物之中。此外，在版本升级至 v3 后，Webpack 不仅承担了基础的打包职责，还进一步加强了针对性能方面的考量，比如懒加载策略的应用等[^1]。 #### 4. 如何实现按需加载？ 借助 Webpack 自带的 Code Splitting 特性和动态导入语句 (`import()`) 可以轻松达成按需加载的效果。这种方式允许开发者根据实际需求只下载必要的部分而不是一次性获取全部内容，进而提升首屏渲染速度并减少不必要的网络请求开销[^4]。 ```javascript // 使用 import 实现异步加载组件 function loadComponent(path) { return import(`./components/${path}.jsx`); } ``` #### 5. 常见的 Webpack Plugins 有哪些？ 一些常用的 Webpack 插件列举如下： - **HtmlWebpackPlugin**: 自动生成 HTML 文件并将所有生成的 JS/CSS 文件注入其中[^3]。 - **MiniCssExtractPlugin**: 把 CSS 提取到独立的文件里而非嵌入到 JS 中[^3]。 - **CleanWebpackPlugin**: 清除每次重新编译前遗留下来的旧版文件夹及其内部数据项。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值