服务器iis做网站,杭州网站开发后端招,企业建设网站的意义,网站建设厃金手指谷哥十四Webpack Webpack 是一个现代 JavaScript 应用程序的静态模块打包器#xff08;module bundler#xff09;。它允许开发者将项目中的资源#xff08;如 JavaScript、CSS、图片等#xff09;视为模块#xff0c;通过分析和处理这些模块之间的依赖关系#xff0c;将它们打包…
Webpack Webpack 是一个现代 JavaScript 应用程序的静态模块打包器module bundler。它允许开发者将项目中的资源如 JavaScript、CSS、图片等视为模块通过分析和处理这些模块之间的依赖关系将它们打包成一个或多个 bundle捆绑包这些 bundle 可以在浏览器中加载和执行。Webpack 提高了开发效率简化了前端项目的构建流程是现代前端开发不可或缺的工具之一。 Why Webpack? Webpack通过提供模块化开发、依赖管理、资源优化、开发便捷性、易于集成、构建流程标准化和支持多种目标等特性极大地提高了前端开发的效率和项目的可维护性。 使用Webpack有多个重要原因这些原因主要涉及到前端开发中的效率、模块化、依赖管理、资源优化等方面。以下是使用Webpack的几个关键理由 模块化开发 Webpack支持ES6模块化语法以及CommonJS、AMD等模块化标准使得开发者能够以模块化的方式组织代码。这有助于代码的可维护性、可重用性和可扩展性。通过将代码分割成多个模块开发者可以更容易地理解和维护大型项目。 依赖管理 Webpack能够自动分析项目结构找到JavaScript模块以及其它的一些浏览器不能直接运行的扩展语言如SCSS, TypeScript等并将其转换和打包为合适的格式供浏览器使用。它还能智能地处理模块之间的依赖关系确保它们按照正确的顺序加载和执行。 资源优化 Webpack提供了丰富的loader和plugin可以对项目中的资源进行各种优化处理。例如通过Babel loader可以将ES6代码转换为兼容当前浏览器的ES5代码通过CSS loader和style loader可以将CSS文件注入到DOM中通过UglifyJSPlugin可以对打包后的文件进行压缩减少文件体积加快加载速度。 开发便捷性 Webpack提供了开发服务器webpack-dev-server和热模块替换HMR等功能使得开发者在开发过程中能够实时预览更改而无需手动刷新浏览器。这大大提高了开发效率减少了重复性工作。 易于集成 Webpack易于与其他工具和库集成如React、Vue、Angular等前端框架以及ESLint、Prettier等代码质量工具。这使得开发者可以在一个统一的构建系统中完成项目的构建、测试、部署等流程。 构建流程标准化 使用Webpack可以标准化项目的构建流程无论是小型项目还是大型项目都可以通过配置文件来定义项目的构建规则。这使得团队成员能够更容易地理解和参与项目的构建过程提高了团队协作的效率。 支持多种目标 Webpack不仅可以用于构建浏览器端的应用还可以通过适当的配置和插件支持Node.js环境下的服务器端渲染SSR、Electron桌面应用等多种目标。这使得Webpack成为了一个非常灵活和强大的构建工具。
工作原理
Webpack 的工作原理可以概括为以下几个主要步骤 初始化参数Webpack 从配置文件如 webpack.config.js和命令行参数中读取和合并配置确定最终的打包参数。 开始编译使用上一步得到的参数初始化 Compiler 对象并加载所有配置的插件。Compiler 对象执行 run 方法开始执行编译过程。 确定入口根据配置文件中的 entry 字段找出所有的入口文件。这些入口文件是 Webpack 打包的起点。 编译模块从入口文件开始Webpack 会递归地分析每个模块的依赖并使用配置的 Loader 对这些模块进行翻译和转换。Loader 是一种转换器可以将各种资源如 CSS、图片等转换为 Webpack 能够处理的模块。 完成模块编译在所有的模块都被 Loader 转换后Webpack 会得到每个模块的最终内容和它们之间的依赖关系图。 输出资源Webpack 根据入口和模块之间的依赖关系将模块组合成一个个包含多个模块的 Chunk代码块。每个 Chunk 可以是一个独立的文件也可以被组合成最终的 bundle。然后Webpack 将这些 Chunk 转换成单独的文件并加入到输出列表中。 输出完成最后Webpack 根据配置确定输出的路径和文件名将文件内容写入到文件系统中。 简单的说就是分析代码找到“require”、“exports”、“define”等关键词并替换成对应模块的引用。 在一个配置文件中指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体通过一个给定的主文件 index.jswebpack将从这个文件开始找到你的项目的所有的依赖文件使用loaders处理他们最后打包为一个浏览器可以识别的js文件。 基本能力 处理依赖 方便引用第三方模块让模块更容易复用、避免全局注入导致的冲突、避免重复加者加载不必要的模块载。 Webpack通过读取入口文件、解析文件并生成AST、遍历AST并处理依赖、构建依赖图、打包输出等步骤来处理项目中的依赖并最终生成可供浏览器或Node.js环境运行的bundle文件。这一过程充分利用了AST的抽象能力使得Webpack能够准确地理解和处理复杂的项目依赖关系。 1. 初始化与配置 Webpack从配置文件如webpack.config.js中读取配置信息包括入口文件entry、输出配置output、模块规则module rules等。根据配置信息Webpack初始化一个Compiler对象这个对象将控制整个构建过程。 2. 读取入口文件 Webpack从配置的入口文件开始读取这个文件的内容。 3. 解析入口文件并生成AST 使用Webpack内置的解析器或配置的loader如babel-loader对入口文件进行解析。解析过程中源码会经过词法分析Lexical Analysis和语法分析Syntax Analysis两个阶段最终生成AST。 词法分析将源代码字符串转换为一系列标记tokens的集合。语法分析使用这些标记来构建ASTAST是一个树状结构表示了源代码的语法结构。 4. 遍历AST并处理依赖 Webpack使用遍历器如Babel的babel/traverse来遍历AST。在遍历过程中Webpack会识别出所有的依赖声明如import和require语句。对于每个依赖Webpack会递归地执行上述步骤读取文件、解析文件、生成AST、遍历AST并处理依赖直到所有依赖都被处理完毕。 5. 依赖图构建 通过上述递归过程Webpack会构建一个依赖图Dependency Graph这个图表示了项目中所有模块之间的依赖关系。 6. 打包输出 在依赖图构建完成后Webpack会根据配置中的输出配置将项目中的所有模块打包成一个或多个bundle文件。这些bundle文件包含了项目的所有代码并且已经通过loader进行了必要的转换和优化。 7. 插件介入 在Webpack的构建过程中还可以通过插件Plugins来介入和修改构建流程。插件可以在Webpack生命周期的不同阶段执行自定义的逻辑如打包优化、资源管理等。 模块化 前端模块化-webpack打包工具-CSDNVue入门技能树
AMD、CMD、CommonJs的优缺点区别_amd cmd的优劣势-CSDN博客
CommonJS模块
//moduleA.js
// 导出变量
module.exports.name Alice; // 或者导出函数
function sayHello() { return Hello, CommonJS!;
}
module.exports.sayHello sayHello;//main.JS
// 导入moduleA模块
const moduleA require(./moduleA); console.log(moduleA.name); // 输出: Alice
console.log(moduleA.sayHello()); // 输出: Hello, CommonJS! 优点 简单易用CommonJS的模块系统相对简单易于理解和使用。支持服务器端Node.js等服务器端JavaScript环境广泛支持CommonJS。丰富的生态系统npm等包管理工具为CommonJS模块提供了丰富的第三方库和工具。 缺点 同步加载CommonJS模块是同步加载的这在服务器端通常不是问题但在浏览器端可能会导致性能问题。因此在浏览器端使用CommonJS模块时通常需要通过打包工具如Webpack进行转换和优化。浏览器兼容性浏览器默认不支持CommonJS模块系统需要通过工具进行转换才能在浏览器中使用。 ES6模块
// 导出变量和函数
export let name Alice;
export function sayHello() { console.log(Hello, ES6 Modules!);
} // 默认导出
export default function createGreeting(name) { return Hello, ${name}!;
}
----------------------------------------------
// 导入具名导出的变量和函数
import { name, sayHello } from ./moduleA.js; console.log(name); // 输出: Alice
sayHello(); // 输出: Hello, ES6 Modules! // 导入默认导出的函数并重命名
import createGreeting as greet from ./moduleB.js; console.log(greet(Bob)); // 输出: Hello, Bob!
打包 各种loader与插件loader加载各种资源、babel把ES6转化为ES5-eslint可以检查编译时的各种错误。 //常见loader
1. css-loader style-loader
{ test: /\.css$/, use: [style-loader, css-loader]
}
2. less-loader sass-loader
{ test: /\.s[ac]ss$/i, use: [style-loader, css-loader, sass-loader]
}
3.babel-loader
{ test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: babel-loader, options: { presets: [babel/preset-env] } }
}
4.file-loader url-loader
{ test: /\.(png|jpe?g|gif)$/i, use: [ { loader: url-loader, options: { limit: 8192, // 小于8KB的图片会被base64处理 outputPath: images/ // 输出目录 } } ]
}
5. ts-loader awesome-typescript-loader
{ test: /\.tsx?$/, use: ts-loader, exclude: /node_modules/
} 合并代码把各个分散的模块集中打包成大文件减少HTTP的链接的请求次数配合uglify.js可以减少、优化代码的体积分块好渲染
打包中常见核心概念
摇树 Tree-shaking 它的名字来源于通过摇晃shakeJavaScript代码的抽象语法树AST是一种用于优化JavaScript代码的技术主要用于移除未被使用的代码使得最终生成的代码包含应用程序中实际使用的部分。 Webpack摇树VS Vite摇树 摇树失败原因
1、代码引入没用import(ES6) 使用了CommonJS模块化规范
CommonJS采用require()和module.exports进行模块导入导出这种方式是动态导入且同步加载的无法在编译时确定所依赖的模块因此Webpack在进行摇树时可能会忽略这些模块。 必须用 import 导入导出用 esm 或者 commonjs 都行 2、代码没开启摇树
在Webpack的optimization配置中需要设置usedExports为true来标记无用代码。此外还需要配合代码压缩插件如terser-webpack-plugin来移除这些无用代码。 3、副作用(sideEffects)
在webpack.config.js中设置sideEffects为true时Webpack会检查第三方包的package.json中的sideEffects字段。如果设置不当或Webpack无法准确判断代码中是否存在副作用则可能导致摇树失败。 代码存在副作用修改全局变量、修改外部作用域的行为等副作用会导致Webpack无法安全地移除未使用的代码因为这些代码可能会对外部产生影响。
4、babel配置preset-env没写module:false参数码没用import引入
使用babel-loader时如果配置了babel/preset-env且未禁用ESM到CommonJS的转换可能会导致Webpack拿到的是以CommonJS组织的代码从而无法进行摇树。 Chunk webpack的本质是把多个js模块合并到一个js中即一个入口得到一个输出js文件bundle.js。但是导致的问题是如果这个bundle.js文件很大那么浏览器请求的时候导致请求时间很长首屏长时间白屏。所以优化手段就是把bundle.js文件拆分成多个小的js文件同时请求首屏当然就更快渲染显示。所以入口文件chunk文件输出文件三者的关系从原来的一个入口文件对应一个chunk最后输出一个bundle文件改变为一个入口文件对应多个chunk最后输出多个bundle文件 获得Chunk方法
在Webpack中一个chunk通常指的是构建过程中生成的一个或多个bundle即打包后的文件。这些chunks可以包含应用程序的代码、第三方库、懒加载的代码块等。了解如何获取或操作这些chunks对于进行代码分割、懒加载优化等场景非常有用。
1. 运行时获取chunks
在客户端浏览器中Webpack提供了__webpack_require__.e函数来动态加载即懒加载chunks。但直接获取已加载或可用的chunks列表在运行时通常不是Webpack的直接功能因为这取决于你的代码分割策略和懒加载逻辑。
然而你可以通过一些间接的方式来获取关于chunks的信息比如 通过Webpack的manifest文件Webpack可以生成一个manifest文件它包含了关于各个chunk的元数据如文件名、包含的模块等。虽然这不是直接在客户端运行时获取但你可以在构建过程中解析这个文件来获取chunks的信息。 使用Webpack的Stats对象在构建过程中你可以通过Webpack的stats对象来获取关于构建结果的详细信息包括chunks的信息。这通常用于构建后分析或优化。
2. 构建时获取chunks
在Webpack的构建过程中你可以通过Webpack的API或插件来访问和修改chunks。这通常是通过编写Webpack插件来完成的因为Webpack插件可以访问到Webpack的编译compilation和构建compilation.hooks过程。
例如你可以编写一个Webpack插件监听compilation.hooks.additionalChunkAssets或compilation.hooks.optimizeChunkAssets等钩子以获取或修改chunks。
class MyPlugin { apply(compiler) { compiler.hooks.emit.tapAsync(MyPlugin, (compilation, callback) { const chunks compilation.chunks; chunks.forEach(chunk { console.log(Chunk name: ${chunk.name}); console.log(Chunk files: ${chunk.files}); // 这里可以进一步处理chunks }); callback(); }); }
} module.exports MyPlugin; 热更新 Webpack热更新Hot Module Replacement简称HMR是Webpack提供的一种在开发过程中实现模块动态替换和更新的功能而无需刷新整个页面。这种技术能够极大地提升开发效率允许开发者在保持应用状态的同时实时预览修改的效果。 一、热更新的基本原理
启动Webpack开发服务器 当启动Webpack开发服务器如webpack-dev-server时会创建一个WebSocket或轮询连接用于与浏览器建立通信通道。开发服务器通常将打包后的文件存储在内存中以提高访问速度。捕获模块变化 使用Webpack的热更新插件如HotModuleReplacementPlugin来捕获模块的变化。当源代码文件发生变化时Webpack会重新编译这些文件并生成新的模块。生成更新补丁 Webpack将变化的模块及其依赖模块打包成一个或多个更新补丁update chunk。这些补丁包含了模块的新代码和必要的元数据。发送更新补丁 通过之前建立的WebSocket或轮询连接Webpack将更新补丁发送给浏览器。浏览器接收并处理更新补丁 浏览器接收到更新补丁后使用热更新的运行时Hot Module Replacement Runtime来解析和处理这些补丁。运行时根据更新补丁对模块进行动态替换和更新同时尽可能地保持应用的状态。
二、热更新的优势
快速反馈开发者可以在修改代码后立即看到修改效果无需手动刷新页面。保持应用状态在模块替换过程中应用的状态得以保留开发者可以继续与应用进行交互。提高开发效率减少了调试和错误修复的时间提升了开发效率。
