情侣博客网站模板,wordpress首页源码,服务 好的网站制作,网站建设策文章目录 概要整体架构流程技术名词解释技术细节小结 概要
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它的主要功能是将各种资源#xff08;如 JavaScript、CSS、图片等#xff09;视为模块#xff0c;并将它们打包成一个或多个输出文件#xff0c;以便… 文章目录 概要整体架构流程技术名词解释技术细节小结 概要
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它的主要功能是将各种资源如 JavaScript、CSS、图片等视为模块并将它们打包成一个或多个输出文件以便在浏览器中使用。以下是对 Webpack 的一些关键理解
1. 模块化
Webpack 采用模块化的概念允许开发者将应用程序拆分成多个独立的模块。每个模块可以是一个 JavaScript 文件、CSS 文件甚至是图片或字体。Webpack 会分析这些模块之间的依赖关系并生成一个依赖图。
2. 入口和输出
入口EntryWebpack 的构建过程从入口文件开始。开发者可以指定一个或多个入口文件Webpack 会从这些文件开始构建依赖图。输出OutputWebpack 允许开发者配置输出的文件名和文件路径。默认情况下Webpack 会将打包后的文件输出到 dist 目录。
3. 加载器Loaders
加载器是 Webpack 的核心概念之一。它们允许开发者处理非 JavaScript 文件如 CSS、Sass、TypeScript、图片等。通过使用加载器Webpack 可以将这些文件转换为有效的模块。例如使用 babel-loader 可以将 ES6 的 JavaScript 转换为兼容的 ES5 代码。
4. 插件Plugins
插件是 Webpack 的另一重要特性。它们提供了更强大的功能能够扩展 Webpack 的功能。通过插件开发者可以执行各种任务比如压缩代码、提取 CSS、生成 HTML 文件、热模块替换等。常用的插件包括 HtmlWebpackPlugin、MiniCssExtractPlugin 和 TerserWebpackPlugin。
5. 开发服务器Dev Server
Webpack 提供了一个开发服务器webpack-dev-server可以在本地开发时提供即时的热重载功能。当代码发生变化时开发服务器会自动刷新浏览器帮助开发者更高效地进行开发。
6. 优化
Webpack 提供了一系列优化选项如代码分割Code Splitting、懒加载Lazy Loading、树摇Tree Shaking等。这些功能可以帮助减小输出文件的大小提高加载速度和性能。
7. 配置
Webpack 的配置文件通常是一个 JavaScript 文件webpack.config.js开发者可以在其中定义入口、输出、加载器、插件等配置项。尽管 Webpack 的配置文件可以非常复杂但它也提供了灵活性允许开发者根据项目需求进行定制。
8. 社区和生态系统
Webpack 拥有一个活跃的社区和丰富的生态系统提供了大量的插件和加载器可以满足各种需求。这个生态系统使得 Webpack 成为前端开发中非常流行的工具之一。
总结
Webpack 是一个强大且灵活的工具可以帮助开发者构建现代化的 JavaScript 应用程序。通过模块化、加载器、插件和优化等特性Webpack 有效地管理和打包应用程序的资源提升开发效率和应用性能。虽然学习曲线可能较陡峭但掌握 Webpack 后开发者能够更好地管理复杂的前端项目。
整体架构流程
1. 初始化
配置文件Webpack 从配置文件通常是 webpack.config.js开始读取配置。这个文件定义了 Webpack 的入口、输出、模块、插件等各种设置。环境变量Webpack 会根据环境变量如 NODE_ENV来决定是以开发模式还是生产模式运行。
2. 入口Entry
解析入口文件Webpack 根据配置中的入口entry选项确定从哪个文件开始构建依赖图。入口可以是一个文件也可以是一个数组或对象用于多入口。构建依赖图Webpack 会分析入口文件中的 import 和 require 语句递归解析所有依赖的模块形成一个完整的依赖图。
3. 模块解析Module Resolution
加载器Loaders在解析模块时Webpack 会使用加载器来处理不同类型的文件。加载器可以将非 JavaScript 文件如 CSS、图片、TypeScript 等转换为有效的模块。执行模块Webpack 会执行每个模块生成一个模块对象并将其缓存以便在后续引用时能够快速访问。
4. 插件Plugins
应用插件在构建过程中Webpack 会调用配置中的插件。插件可以在不同的生命周期钩子中执行特定的任务如优化代码、生成 HTML 文件、提取 CSS 等。增强功能插件的作用非常广泛可以用来增强 Webpack 的功能处理各种复杂的构建需求。
5. 输出Output
生成输出文件Webpack 根据输出配置将打包后的文件生成到指定的输出目录。输出文件的名称可以使用占位符如 [name]、[hash] 等进行动态命名。生成清单文件Webpack 还可以生成清单文件如 manifest.json记录模块之间的依赖关系和版本信息。
6. 优化
代码分割Code SplittingWebpack 支持将代码拆分成多个文件以便按需加载减少初始加载时间。树摇Tree ShakingWebpack 会通过静态分析删除未使用的代码减小输出文件的大小。压缩和混淆在生产模式下Webpack 通常会使用插件如 TerserWebpackPlugin来压缩和混淆代码提高性能。
7. 开发服务器Dev Server
热模块替换Hot Module Replacement, HMRWebpack 提供了开发服务器可以在开发过程中实现热模块替换允许开发者在不刷新页面的情况下更新模块。实时重载开发服务器会监控文件变化并自动刷新浏览器提升开发效率。
8. 完成
构建完成Webpack 在完成所有模块的解析、处理和输出后构建过程结束。开发者可以在浏览器中查看打包后的应用程序。
技术名词解释
1. 模块Module
在 Webpack 中模块是构成应用程序的基本单元。每个模块可以是一个 JavaScript 文件、CSS 文件、图像或其他资源。Webpack 将这些模块视为独立的单元并在构建过程中处理它们的依赖关系。
2. 入口Entry
入口是 Webpack 开始构建的地方。它指向应用程序的主文件或多个文件Webpack 从这些文件开始解析依赖关系。可以通过配置文件中的 entry 属性来指定。
3. 输出Output
输出是 Webpack 打包后生成的文件的配置。它定义了打包文件的名称、路径和其他输出选项。通过配置文件中的 output 属性来设置。
4. 加载器Loader
加载器是 Webpack 的一个核心概念用于处理非 JavaScript 文件。它们允许开发者将不同类型的文件如 CSS、Sass、TypeScript、图片等转换为有效的模块。加载器在 Webpack 构建过程中执行可以在配置中通过 module.rules 来定义。
5. 插件Plugin
插件是 Webpack 的另一重要特性用于扩展 Webpack 的功能。插件可以在构建的不同阶段执行特定的任务如优化代码、生成 HTML 文件、提取 CSS 等。通过配置文件中的 plugins 数组来使用插件。
6. 依赖图Dependency Graph
依赖图是 Webpack 在构建过程中生成的一个结构表示模块之间的依赖关系。Webpack 根据入口文件分析所有模块及其依赖形成一个完整的依赖图以便在打包时正确处理模块的顺序。
7. 热模块替换Hot Module Replacement, HMR 热模块更换Hot Module ReplacementHMR
热模块替换是 Webpack 提供的一项功能允许在开发过程中替换、添加或删除模块而无需完全刷新页面。这有助于提高开发效率保持应用程序的状态。
8. 代码分割Code Splitting
代码分割是 Webpack 的一项优化技术允许将代码拆分成多个小块以便按需加载。这可以减少初始加载时间提高应用程序的性能。
9. 树摇Tree Shaking
树摇是 Webpack 的一项优化技术旨在通过静态分析删除未使用的代码从而减小输出文件的大小。这通常在生产模式下进行以提高应用程序的性能。
10. 开发服务器Dev Server
Webpack 提供的开发服务器webpack-dev-server用于在本地开发时提供即时的热重载功能。它监控文件的变化并在发生变化时自动刷新浏览器。
11. 清单文件Manifest
清单文件是 Webpack 生成的一个 JSON 文件记录了模块之间的依赖关系和版本信息。它用于帮助管理和加载模块尤其是在使用代码分割时。
12. 配置文件Configuration File
Webpack 的配置文件通常是一个 JavaScript 文件webpack.config.js用于定义 Webpack 的入口、输出、加载器、插件等各种设置。配置文件可以根据项目的需求进行定制。
13. 环境变量Environment Variables
环境变量用于配置 Webpack 在不同环境下的行为如开发模式和生产模式。通常使用 NODE_ENV 来指示当前的环境以便在构建时应用不同的优化和设置。
14. 输出文件名占位符Output Filename Placeholders
Webpack 允许在输出文件名中使用占位符如 [name]、[hash]、[chunkhash] 等进行动态命名。这有助于实现缓存策略和版本控制。
15. 异步加载Lazy Loading
异步加载是一种技术允许在需要时加载模块而不是在应用程序启动时加载所有模块。这可以通过代码分割和动态 import() 实现帮助提高应用程序的性能。
技术细节
1、我们可以先通过命令npx i create-react-app my-app创建一个react项目。
2、在根目录创建两个文件 webpack.config.dev.js写开发环境配置
const path require(path)
const MiniCssExtractPlugin require(mini-css-extract-plugin)
const HtmlWebpackPlugin require(html-webpack-plugin)const config {entry: ./src/index.js,output: {filename: [name].js,path: path.resolve(__dirname, ./dist)},mode: development,plugins: [new HtmlWebpackPlugin({template: ./public/index.html}),// new MiniCssExtractPlugin()],devServer: {static: {directory: path.join(__dirname, public),},compress: true,port: 9000,},module: {rules: [{test: /\.css$/,use: [style-loader,css-loader,]},{test:/\.js$/,exclude: /node_modules/,use: {loader: babel-loader,}},{test:[/\.bmp$/, /\.png$/, /\.jpe?g$/, /\.gif$/],type:asset},{test: /\.svg$/,use: url-loader}]}
}module.exports config
在运行之前还要配置babel.config.json文件这里是babel的预设。
{presets:[[babel/preset-react,{runtime: automatic}]]
}
webpack.congif.prod.js写生产环境代码生产环境中没有devServer的配置
const path require(path)
const MiniCssExtractPlugin require(mini-css-extract-plugin)
const HtmlWebpackPlugin require(html-webpack-plugin)const config {entry: ./src/index.js,output: {filename: [name].js,path: path.resolve(__dirname, ./dist)},mode: production,plugins: [new HtmlWebpackPlugin({template: ./public/index.html}),new MiniCssExtractPlugin()],module: {rules: [{test: /\.css$/,use: [// style-loader,MiniCssExtractPlugin.loader,css-loader,]},{test:/\.js$/,exclude: /node_modules/,use: {loader: babel-loader,}},{test:[/\.bmp$/, /\.png$/, /\.jpe?g$/, /\.gif$/],type:asset},{test: /\.svg$/,use: url-loader}]}
}module.exports config3、修改pageage.json文件中的启动命令
scripts: {my_dev: webpack serve --config webpack.config.dev.js,my_prod: webpack build --config webpack.config.prod.js},
4、手动发布
通过npm run my_prod构建打包生成dist文件夹。 对于前端来说
拿到一个项目首先需要通过npm i 回复依赖
其次我们可以在腾讯云搜索cos 对象存储共有读私有写。
我们要将除了index.html文件之外的所有静态资源文件图片/js文件/css文件放到cdn上
根据生成的cdn远程链接替换在打包完成之后的index.html的两个标签中我下面勾出来的就是要替换的位置。 对于后端来说
将前端打包之后生成的index.html代码复制替换到后端node的html模版位置。
小结
学会webpack的基础搭建你就已经超越了70%拥有三年前端开发经验的程序员所以这部分还是需要用心去掌握的。
