webpack（react）基本构建

文章目录

- 概要
- 整体架构流程
- 技术名词解释
- 技术细节
- 小结

概要

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它的主要功能是将各种资源（如 JavaScript、CSS、图片等）视为模块，并将它们打包成一个或多个输出文件，以便在浏览器中使用。以下是对 Webpack 的一些关键理解：

1. 模块化

Webpack 采用模块化的概念，允许开发者将应用程序拆分成多个独立的模块。每个模块可以是一个 JavaScript 文件、CSS 文件，甚至是图片或字体。Webpack 会分析这些模块之间的依赖关系，并生成一个依赖图。

2. 入口和输出

入口（Entry）：Webpack 的构建过程从入口文件开始。开发者可以指定一个或多个入口文件，Webpack 会从这些文件开始构建依赖图。
输出（Output）：Webpack 允许开发者配置输出的文件名和文件路径。默认情况下，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 Splitting）：Webpack 支持将代码拆分成多个文件，以便按需加载，减少初始加载时间。
树摇（Tree Shaking）：Webpack 会通过静态分析删除未使用的代码，减小输出文件的大小。
压缩和混淆：在生产模式下，Webpack 通常会使用插件（如 TerserWebpackPlugin）来压缩和混淆代码，提高性能。

7. 开发服务器（Dev Server）

热模块替换（Hot Module Replacement, HMR）：Webpack 提供了开发服务器，可以在开发过程中实现热模块替换，允许开发者在不刷新页面的情况下更新模块。
实时重载：开发服务器会监控文件变化，并自动刷新浏览器，提升开发效率。

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 Replacement，HMR）

热模块替换是 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 = config

3、修改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%拥有三年前端开发经验的程序员，所以这部分还是需要用心去掌握的。