Tag:工程化
All the articles with the tag "工程化".
Webpack 怎么配置多入口应用， 并实现公共依赖的提取？
Posted on:2024年9月21日 at 02:11可以通过以下步骤实现： 1. 配置多入口 在 Webpack 配置中，可以定义多个入口点，每个入口对应一个输出文件。 const path = require('path'); module.exports = { entry: { app1: './src/app1/index.js', app2: './src/app2/index.js', }, output: { filename: '[
Webpack 有哪些常见配置？
Posted on:2024年9月21日 at 02:09Webpack 的配置文件（通常为 webpack.config.js）中包含多种常见配置项，以下是一些主要的配置选项： 1. Entry 入口：定义应用的入口点，可以是单个文件或多个文件。entry: './src/index.js', 2. Output 输出：配置打包后文件的输出位置和文件名。output: { filename: 'bundle.js', path: path.resolv
谈谈你对 Webpack的认识
Posted on:2024年9月21日 at 02:07Webpack 是一个现代 JavaScript 应用的静态模块打包工具，广泛应用于前端开发中。 以下是 Webpack 的一些重要知识点： 1. 模块化打包 核心功能：Webpack 的主要功能是将应用中的不同模块（如 JavaScript、CSS、图片等）打包成一个或多个输出文件，支持 CommonJS、AMD 和 ES6 模块等多种模块化方案。 2. 配置灵活性 高度可定制：Webpack
微前端中的路由加载流程是怎么样的？
Posted on:2024年9月21日 at 02:04在微前端架构中，路由的加载涉及到主应用和各个微应用之间的协作。 以下是微前端中路由加载的主要步骤和机制： 1. 主应用路由管理 配置路由：主应用负责管理全局路由配置，定义每个路径对应的微应用。路由配置可以包括路径、微应用的 URL、加载方式等信息。 2. 路由匹配 监听路由变化：当用户导航到某个路径时，主应用监听路由变化并解析当前路径。 匹配微应用：主应用根据路由配置匹配相应的微应用，决定需要加载
微前端的设计原则有哪些？
Posted on:2024年9月20日 at 01:08微前端的设计原则主要包括以下几点： 1. 技术独立性 自由选择技术栈：每个微前端可以独立选择技术栈，不同的团队可以使用最适合其需求的框架和工具。 2. 解耦性 独立部署和开发：微前端应该是独立的模块，能够单独开发、测试和部署，减少相互依赖。 3. 版本兼容性 版本控制：确保不同版本的微前端可以共存，避免因版本不兼容导致的功能失效。 4. 用户体验一致性 统一的用户界面：尽管技术栈不同，各个微前端应
为什么现代前端应用需要打包工具进行打包编译？
Posted on:2024年9月9日 at 13:59打包构建必要性 现代前端应用需要打包工具进行打包编译的主要原因有以下几点： 模块化管理：现代前端应用通常采用模块化的开发方式，将代码划分为多个模块，每个模块具有独立的功能和依赖关系。打包工具可以将这些模块进行分析，将它们打包成一个或多个静态文件，方便管理和维护。 解决浏览器兼容性问题：不同的浏览器对于 JavaScript 和 CSS 的支持程度不同，而且随着新特性的不断出现，旧版浏览器可能无法完
webpack tree-shaking 在什么情况下会失效？
Posted on:2024年9月9日 at 01:29Webpack 的 Tree Shaking 是一种优化技术，旨在删除未使用的代码，以减小最终构建包的体积。但有些场景下，可能会导致 Tree Shaking 失效： 1. 使用 CommonJS 模块 问题：CommonJS 模块（如 require() 和 module.exports）的动态导入特性使得 Webpack 难以静态分析哪些代码是未使用的。 解决：尽量使用 ES6 模块语法（im
为什么 webpack 可以通过文件打包，让浏览器可以支持 CommonJS 规范？
Posted on:2024年9月3日 at 01:40尽管浏览器本身不直接支持 CommonJS 模块规范，Webpack 通过以下步骤将模块化的代码打包成浏览器可以读取的格式： 1. 解析依赖 Webpack 会解析项目中所有的模块及其依赖关系。它会从入口文件开始，递归地分析所有导入的模块（import 或 require），构建出一个完整的依赖图（dependency graph）。 2. 转换模块 Webpack 使用加载器（loaders）将
浏览器是否支持 CommonJs 规范？
Posted on:2024年9月3日 at 01:38浏览器本身不直接支持 CommonJS 规范。CommonJS 主要是为服务器端（如 Node.js）设计的模块规范，通常用于服务器环境中处理模块的加载和管理。 CommonJS 规范概述 模块导出：使用 module.exports 和 exports 导出模块。 模块加载：使用 require() 函数导入模块。 例如，CommonJS 模块的代码如下： math.js: // 导出模块 mo
为什么 SPA 应用都会提供一个 hash 路由，好处是什么？
Posted on:2024年9月2日 at 01:28单页应用（SPA）提供 hash 路由的原因主要涉及到历史记录管理和页面状态的保存。 以下是使用 hash 路由的优点： **1. 浏览器兼容性 历史记录支持：Hash 路由利用 URL 中的 #（哈希标记）来管理页面状态。这种方法在所有现代浏览器中都得到支持，即使是在旧版浏览器中也能正常工作，因为哈希部分不会引发浏览器的页面重新加载。 **2. 无需服务器配置 避免服务器配置问题：Hash 路由
package.json 里面 sideEffects 属性的作用是什么？
Posted on:2024年8月28日 at 01:18package.json 中的 sideEffects 属性主要用于优化 JavaScript 打包工具（如 Webpack）的 tree shaking 过程。tree shaking 是一种优化技术，它会移除未使用的代码，以减小打包后的文件体积。 sideEffects 属性的作用 标记模块是否有副作用：sideEffects 属性告诉打包工具，模块中的代码是否有副作用（side effect
npm 中的“幽灵依赖”是什么？
Posted on:2024年8月16日 at 12:08“幽灵依赖”（Phantom Dependencies）指的是在项目的 package.json 文件中没有显式列出，但在代码中却被使用的依赖。这种依赖通常在实际的 package.json 中并没有被列为 dependencies 或 devDependencies，但由于某些原因（如子依赖）在项目中仍然存在，并可能影响应用的行为。 成因 子依赖：项目中某些依赖的依赖（即子依赖）在你的项目中被使
说说你对 Source Map 的了解
Posted on:2024年8月16日 at 05:26Source Maps 是一种帮助开发者在调试时映射压缩或转译后的代码到源代码的工具。它们对于在开发过程中调试复杂的前端应用程序非常重要，尤其是当代码经过了编译、转译或压缩处理后。 以下是对 Source Maps 的详细介绍： 1. Source Maps 的作用 调试：帮助开发者在调试时看到原始的源代码，而不是经过转译或压缩后的代码。这使得调试更加直观和高效。 错误跟踪：提供了更精确的错误堆栈
npm script 生命周期有哪些?
Posted on:2024年8月15日 at 23:06在 npm 中，scripts 部分允许你定义和运行自定义的脚本命令。npm 脚本有一个生命周期的概念，其中包括一系列的预定义和自定义的生命周期钩子。生命周期钩子的执行顺序和作用如下： 1. 生命周期钩子概述 在 npm 中，生命周期钩子是一些特定的脚本命令，npm 会在特定的时间点自动运行这些命令。例如，安装包之前、之后或者在发布时。 2. 生命周期钩子的具体阶段 prepublish 触发时间
npm lock 文件了解多少？
Posted on:2024年8月15日 at 19:01package-lock.json 是 npm 的一个锁文件，用于记录项目中实际安装的依赖树的确切版本和依赖关系。这个文件是 npm 5.0.0 引入的，目的是确保不同开发环境和部署环境中的依赖一致性。 package-lock.json 的功能和特点 锁定版本： 锁定项目中每个依赖包的确切版本，确保在不同的环境中安装时得到相同的版本。 记录依赖树： 记录项目所有直接和间接依赖的完整树结构，包括每
npm script 了解多少？
Posted on:2024年8月15日 at 18:58npm script 是 Node.js 的包管理工具 npm 提供的功能，用于在 package.json 文件中定义自定义的命令和脚本。它使得在项目中执行常见的开发任务变得更加简便和一致。下面是对 npm script 的详细理解： 1. 基本概念 定义：npm scripts 是在 package.json 文件的 scripts 字段中定义的一组命令。你可以在这里定义任何你想要的命令，并通
webpack 中 module、chunk 、bundle 的区别是什么？
Posted on:2024年8月15日 at 18:56在 Webpack 中，module、chunk 和 bundle 是处理构建过程中的不同概念： 1. Module（模块） 定义：模块是代码的基本单位。在 Webpack 中，几乎所有的内容都被视为模块，包括 JavaScript 文件、CSS 文件、图片等。 作用：模块是 Webpack 构建的基础，Webpack 会根据配置将模块解析、转换和打包。模块可以是 ES6 模块、CommonJS
webpack 分包的方式有哪些？
Posted on:2024年8月15日 at 18:36在 Webpack 中，分包（或代码分割）是一种优化技术，用于将应用程序的代码拆分成多个较小的包，从而提高加载性能和效率。 Webpack 提供了多种方式来实现代码分割： 1. 入口点分割（Entry Points Split） 定义：通过配置多个入口点，将应用程序分成多个独立的包。每个入口点可以生成一个单独的 bundle。 示例： module.exports = { entry: { app
webpack 中的 externals 作用是什么？
Posted on:2024年8月15日 at 18:34在 Webpack 中，externals 是一个配置选项，用于指定哪些模块不应该被打包到最终的 bundle 中。这个选项的主要作用是避免将某些依赖项包括在打包文件中，而是将这些依赖项作为外部资源进行加载。以下是 externals 的详细作用和使用场景： 1. 避免重复打包 如果你的项目依赖某些库，而这些库在运行时会从 CDN 或其他外部来源加载（比如 jQuery、React），你可以使用
说说 webpack 异步加载的原理
Posted on:2024年8月15日 at 18:33Webpack 的异步加载（懒加载）原理主要涉及动态导入（import()）和代码分割（Code Splitting）。这种方式可以优化页面的加载速度和性能，通过按需加载模块来减少初始加载的资源量。以下是详细的原理和实现过程： 1. 动态导入（Dynamic Imports） 动态导入是一种在运行时按需加载模块的方法。在 Webpack 中，动态导入语法是 import()，它返回一个 Promi
webpack 是如何给 web 应用注入环境变量的，说说它的原理
Posted on:2024年8月15日 at 09:23Webpack 注入环境变量的原理主要通过插件和内置的定义机制来实现。具体步骤如下： 1. 使用 DefinePlugin 插件 Webpack 的 DefinePlugin 插件可以用来创建全局常量，这些常量会在编译时替换代码中的变量。这是注入环境变量的常见方式。 配置步骤 安装 Webpack： npm install webpack --save-dev 配置 DefinePlugin： 在
babel 的工作流程是怎么样的？
Posted on:2024年8月15日 at 09:15Babel 是一个广泛使用的 JavaScript 编译器，用于将现代 JavaScript 代码（ES6+）转译为兼容旧版浏览器和环境的 JavaScript 代码。 Babel 的工作流程可以分为以下几个步骤： 1. 解析（Parsing） 任务：将源代码解析成抽象语法树（AST）。 输入：原始的 JavaScript 源代码。 处理：Babel 使用解析器（如 @babel/parser）将
什么情况下会导致 webpack treeShaking 失效？
Posted on:2024年8月15日 at 09:12Webpack 的 tree-shaking 是一种优化技术，用于去除未使用的代码，从而减小最终打包文件的大小。尽管 tree-shaking 是一个强大的工具，但在一些情况下，它可能会失效。以下是导致 Webpack tree-shaking 失效的一些常见情况： 1. 未使用 ES6 模块语法 问题：Webpack 的 tree-shaking 依赖于 ES6 模块语法（import 和 ex
ES6 代码转成 ES5 代码的实现思路是什么？
Posted on:2024年8月15日 at 00:02将 ES6 代码转换为 ES5 代码的过程涉及将新特性和语法转换成 ES5 兼容的代码。这个过程通常由 JavaScript 转换器（如 Babel）自动完成，但了解其实现思路是很有帮助的。以下是实现思路的概述： 1. 词法分析（Lexical Analysis） 目标：将源代码分解为更小的部分（tokens），例如关键字、标识符、操作符等。 步骤： 读取源代码字符流。 将字符流转换为一系列的 t
如何组织 monorepo 工程？
Posted on:2024年8月14日 at 20:26组织 monorepo 工程（单一代码库管理多个项目或包）是一个关键的工程管理任务。它需要合理的结构和工具，以确保项目的可维护性、可扩展性和协作效率。以下是一些常见的实践和工具来组织 monorepo 工程： 1. 项目结构 目录结构 根目录：包含全局配置文件（如 package.json、tsconfig.json）、构建工具配置、CI/CD 配置等。 packages/ 或 modules/
webpack 5 的主要升级点有哪些？
Posted on:2024年8月10日 at 17:07持久缓存（Persistent Caching）： Webpack 5引入了更好的持久缓存机制，利用了更稳定的HashedModuleIdsPlugin和NamedChunksPlugin，以改善构建性能。 Tree-shaking 改进： Webpack 5对Tree-shaking进行了改进，提供了更好的代码优化，以便删除未使用的代码。 支持 WebAssembly（WASM）： Webpa
说说你对前端工程化的理解
Posted on:2024年8月10日 at 17:07前端工程化是指将前端开发中的设计、开发、测试和部署等环节进行标准化和自动化，以提高开发效率和代码质量，并降低维护成本。 具体而言，前端工程化包括以下方面： 模块化：使用模块化思想可以将复杂的代码拆分成小的可重用的模块，并且使得不同模块之间的依赖关系更加清晰。 自动化构建：通过使用构建工具（如 Gulp、Webpack、Rollup 等），可以自动化地完成代码编译、压缩、打包、转换、优化等任务，从
聊聊 vite 和 webpack 的区别
Posted on:2024年8月10日 at 17:07Vite 和 Webpack 都是前端打包工具，它们的作用类似，但实现方式和使用方法有所不同。以下是它们之间的一些区别： 构建速度：Vite 的构建速度比 Webpack 更快，因为 Vite 在开发环境下使用了浏览器原生的 ES 模块加载，而不是像 Webpack 一样使用打包后的文件进行模块加载。在 Vite 中，每个模块都可以独立地进行编译和缓存，这意味着它只需要重新编译修改过的模块，而不是
什么是 CI/CD？
Posted on:2024年8月10日 at 17:07CI/CD 是一种软件工程实践，用于自动化软件的构建、测试和部署过程。CI/CD 是“持续集成”（Continuous Integration）和“持续交付”或“持续部署”（Continuous Delivery/Continuous Deployment）的缩写。这些实践旨在提高软件开发过程的效率、可靠性和质量。 持续集成（Continuous Integration, CI） 定义：持续集成是
你对 babel 了解吗，能不能说说几个 stage 代表什么意思？
Posted on:2024年8月10日 at 17:07Babel 是一个广泛使用的 JavaScript 编译器，它可以将新版本的 JavaScript 代码转换为向后兼容的旧版本代码。 Babel 通过使用不同的插件集合来支持各个 ECMAScript（ES）提案的不同阶段，这些阶段被称为 "stage"。 以下是几个常见的 Babel stage（阶段）及其代表的意思： Stage 0 - Strawman（展示阶段）: 这是提案中最初的阶段，表
说说 webpack-dev-server 的原理
Posted on:2024年8月10日 at 17:06webpack-dev-server 是一个基于 Express.js 的开发服务器，它提供了一个用于开发环境的实时重载（live reloading）和热模块替换（Hot Module Replacement，HMR）的解决方案。 其工作原理如下： 启动开发服务器：通过运行 webpack-dev-server 命令或在配置文件中设置 devServer 属性，我们可以启动 webpack-de
webpack loader 和 plugin 实现原理
Posted on:2024年8月10日 at 17:06本文讨论的核心内容如下： webpack进行打包的基本原理 如何自己实现一个loader和plugin 注： 本文使用的webpack版本是v4.43.0, webpack-cli版本是v3.3.11，node版本是v12.14.1，npm版本v6.13.4(如果你喜欢yarn也是可以的)，演示用的chrome浏览器版本81.0.4044.129（正式版本） （64 位） 1. webpack打包
webpack treeShaking机制的原理是什么？
Posted on:2024年8月10日 at 17:05Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination tree shaking如何工作的呢? 虽然 tree shaking 的概念在 1990 就提出了，但直到 ES6 的 ES6-style 模块出现后才真正被利用起来。 在ES6以前，我们可以使用CommonJS引入模块：require()，这种引入是动态的，也
前后端分离是什么？
Posted on:2024年8月10日 at 17:05前后端分离，顾名思义，就是前端与后端分开。分开什么？分开开发，分开部署。 这里以java web开发作为例子：我们学web开发的时候会接触到spring mvc框架，spring mvc开发时前端一般都用jsp作为展示页面，后端用servlet处理请求。再到springboot框架，前端使用thymeleaf或者freemarker作为模板引擎展示，后端用controller处理请求。 其中jsp
与webpack类似的工具还有哪些？区别？
Posted on:2024年8月10日 at 17:05一、模块化工具 模块化是一种处理复杂系统分解为更好的可管理模块的方式 可以用来分割，组织和打包应用。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体(bundle) 在前端领域中，并非只有webpack这一款优秀的模块打包工具，还有其他类似的工具，例如Rollup、Parcel、snowpack，以及最近风头无两的Vite 通过这些模块打包工具，能够提高我们的开发效率，减少
如何提高webpack的构建速度？
Posted on:2024年8月10日 at 17:05以下是一些常用的方法： 升级Webpack版本： 确保使用的是最新版本的Webpack，因为每个新版本都可能包含一些性能优化。 使用DllPlugin： 使用DllPlugin和DllReferencePlugin来将第三方库的代码预先打包，以减少构建时间。这样就可以将这些库的代码从主要的构建中分离出来，并在它们没有发生变化时不需要重新构建。 使用缓存： 启用Webpack的缓存，以便在后续构建中
说说如何借助webpack来优化前端性能？
Posted on:2024年8月10日 at 17:05一、背景 随着前端的项目逐渐扩大，必然会带来的一个问题就是性能 尤其在大型复杂的项目中，前端业务可能因为一个小小的数据依赖，导致整个页面卡顿甚至奔溃 一般项目在完成后，会通过webpack进行打包，利用webpack对前端项目性能优化是一个十分重要的环节 二、如何优化 通过webpack优化前端的手段有： JS代码压缩 CSS代码压缩 Html文件代码压缩 文件大小压缩 图片压缩 Tree Sha
webpack的module、bundle、chunk分别指的是什么？
Posted on:2024年8月3日 at 15:23在Webpack中，module、bundle和chunk是三个不同的概念： Module（模块）： module指的是Webpack处理的代码的单个文件。这可以是JavaScript、CSS、图片或其他类型的文件。 在Webpack中，每个文件都被视为一个独立的模块，它们可以通过import、require等方式引入和导出。 模块可以包含代码、依赖关系和其他相关资源，它们通常用于组织和管理应用程
package.json 文件中的 devDependencies 和 dependencies 对象有什么区别？
Posted on:2024年8月3日 at 15:23前端项目的 package.json 文件中，dependencies 和 devDependencies 对象都用于指定项目所依赖的软件包，但它们在项目的开发和生产环境中的使用有所不同。 dependencies： dependencies 是指定项目在生产环境中运行所需要的依赖项。 这些依赖项通常包括运行时需要的库、框架、工具等。 当你通过 npm install 或 npm ci 安装依赖时
说说webpack proxy工作原理？为什么能解决跨域?
Posted on:2024年1月25日 at 19:07一、是什么 webpack proxy，即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制） 想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-server webpack-dev-server webpack-dev-server是 webpack 官方
说说webpack的热更新是如何做到的？原理是什么？
Posted on:2024年1月25日 at 19:07一、是什么 HMR 全称 Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用 例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失 如果使用的是 HMR，就可以实现只将修改的模块实时替换至应用中，不必完全刷新整个应用 在webpack中配置开启热模块也非常的简
面试官：说说Loader和Plugin的区别？编写Loader，Plugin的思路？
Posted on:2024年1月25日 at 19:07一、区别 前面两节我们有提到Loader与Plugin对应的概念，先来回顾下 loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中 plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事 从整个运行时机上来看，如下图所示： 可以看到，两者在运行时机上的区
说说webpack中常见的Plugin？解决了什么问题？
Posted on:2024年1月25日 at 19:06一、是什么 Plugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能 是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据 webpack中的plugin也是如此，plugin赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会运行在 webpack 的不同阶段（钩子 / 生命周
说说webpack中常见的Loader？解决了什么问题？
Posted on:2024年1月25日 at 19:06一、是什么 loader 用于对模块的"源代码"进行转换，在 import 或"加载"模块时预处理文件 webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。如下图所示： 在webpack内部中，任何文件都是模块，不仅仅只是js文件 默认情况下，在遇到import或者load加载模块的时候，webpack只支持对js文件打包 像css、sass、pn
说说webpack的构建流程?
Posted on:2024年1月25日 at 19:05一、运行流程 webpack 的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好 从启动到结束会依次执行以下三大步骤： 初始化流程：从配置文件和 Shell 语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数 编译构建流
说说你对webpack的理解？解决了什么问题？
Posted on:2024年1月25日 at 19:05一、背景 Webpack 最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候，我们会通过文件划分的形式实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中 约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后调用模块化的成员 <script src="module-a.js"></s
Babel的原理是什么
Posted on:2021年7月7日 at 00:11babel 的转译过程分为三个阶段，这三步具体是：解析 Parse: 将代码解析生成抽象语法树( 即AST )，即词法分析与语法分析的过程转换 Transform: 对于 AST 进行变换一系列的操作，babel 接受得到 AST 并通过 babel-traverse 对其进行遍历，在此过程中进行添加、更新及移除等操作生成 Generate: 将变换后的 AST 再转换为 JS 代码, 使用到的模
webpack的热更新是如何做到的？说明其原理
Posted on:2021年7月7日 at 00:11webpack的热更新又称热替换（Hot Module Replacement），缩写为HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。 首先要知道server端和client端都做了处理工作 第一步，在 webpack 的 watch 模式下，文件系统中某一个文件发生修改，webpack 监听到文件变化，根据配置文件对模块重新编译打包，并将打包后的代码通过简单的 Java
如何提高webpack的打包速度
Posted on:2021年7月7日 at 00:11happypack: 利用进程并行编译loader,利用缓存来使得 rebuild 更快,遗憾的是作者表示已经不会继续开发此项目,类似的替代者是thread-loader 外部扩展(externals): 将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间,比如jQuery用script标签引入dll: 采用webpack的 DllPlugin 和 DllR
webpack的构建流程是什么
Posted on:2021年7月7日 at 00:10Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程： 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；确定入口：根据配置中的 entry 找出所有的入口文件；编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，
webpack的Loader和Plugin的不同
Posted on:2021年7月7日 at 00:10不同的作用: Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。 所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。 Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。 在 Webpack 运行的生命
webpack有哪些常见的Plugin
Posted on:2021年7月7日 at 00:10define-plugin：定义环境变量 html-webpack-plugin：简化html文件创建 uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码 webpack-parallel-uglify-plugin: 多核压缩,提高压缩速度 webpack-bundle-analyzer: 可视化webpack输出文件的体积 mini-css-extract-p
webpack、rollup、parcel优劣
Posted on:2021年7月7日 at 00:10webpack适用于大型复杂的前端站点构建: webpack有强大的loader和插件生态,打包后的文件实际上就是一个立即执行函数，这个立即执行函数接收一个参数，这个参数是模块对象，键为各个模块的路径，值为模块内容。立即执行函数内部则处理模块之间的引用，执行模块等,这种情况更适合文件依赖复杂的应用开发. rollup适用于基础库的打包，如vue、d3等: Rollup 就是将各个模块打包进一个文件
Webpack中 loader的作用是什么，以及常用loader有哪些
Posted on:2021年7月7日 at 00:10loader作用：（1）实现对不同格式文件的处理，比如将Scss转换为CSS，或将 TypeScript转化为Javascript。（2）可以编译文件，从而使其能够添加到依赖关系中。loader是 WebPack最重要的部分之一。通过使用不同的 loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理。loader需要在 webpack.config.js里单独用 module进行配