什么是 Webpack什么是 Webpack

Webpack 看起来可能很复杂，在构建 React 应用时你可能会避免学习它。但实际上，为你的 React 应用设置和创建它其实非常简单。本文将为你提供 Webpack 的入门指南，并介绍它的实际功能。让我们来解答你对 Webpack 可能存在的所有疑问……哈哈……

我们将讨论：

• 什么是 Webpack？
• 如何配置 Webpack
• Webpack 中的缓存清除

Webpack 是什么，它是如何工作的，它起什么作用？

如果您熟悉 Create React App，那么 Webpack 负责 Create React App 中的主要功能，以及 Babel（JS 编译器）等其他功能。Create React App 使用 Webpack 将您的文件捆绑在一起，这就是使用 create React app 开发 React 应用程序非常容易的原因。Webpack
是一个模块捆绑器。但这是什么意思呢？这意味着 Webpack 将 JS 文件编译成一个主文件或您想要将代码捆绑到的多个文件，但通常是一个捆绑文件。Webpack
具有许多功能，例如模块捆绑、文件最小化（通过删除空格、注释、不必要的代码以及最小化/缩短代码来最小化代码的过程）、SASS 编译等。它将您正在开发的应用程序捆绑并编译成浏览器可以理解的内容。Webpack
管理依赖项并加载需要首先加载的代码。Webpack 跟踪哪些文件依赖于什么并相应地加载它们。
Webpack 解决的问题是，在开发大型应用程序时，依赖项可能会堆积并跨不同的文件，从而使其变得复杂且难以管理。Webpack 会为您管理所有这些依赖项和文件，并将其打包为浏览器可以理解的纯 JS 文件。

如何配置 Webpack

如果你想在 Webpack 打包文件中添加加载器和插件，你必须在 Webpack 配置文件中进行操作。Webpack
配置文件如下所示。

//Webpack.config.js file:
const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  }
};

让我们来分析一下这个文件中发生的事情。

首先，我们将 设置mode为development，这告诉 Webpack 不要压缩我们的代码，这在开发过程中非常有用。
然后，我们必须确保此文件中的所有内容都已导出为模块（如果我们要使用它）。在初始化应用程序时创建的文件
中，您可以像这样告诉 Webpack 运行：package.jsonnpm initscripts

"scripts": {
    "start": "webpack  --config webpack.config.js"
  },
//The webpack config file can be named anything,
//In this case, it is webpack.config.js

接下来的entry属性接受的是整个应用程序运行的 src 文件。默认情况下，Webpack 会在文件夹index.js中查找文件src，但在这里你可以指定应用程序的启动文件以及需要打包的代码。

属性output是一个对象，用于存放代码的输出。您filename可以随意命名该属性，通常为main.js。
该path属性指定了代码的存放位置。在本例中，我们将解析dist目录的绝对路径，您可以将此文件夹命名为任意名称。本质上，这是 Webpack 打包应用程序的文件夹，传统上此文件夹为dist。
这是配置 Webpack 文件以及如何让 Webpack 运行应用程序的基础知识。当然，您还可以向此配置文件添加更多内容，例如加载器和插件。如果您对此感兴趣，可以参考Webpack 文档。

Webpack 中的缓存清除

缓存清除起初可能是一个令人困惑的话题，但它对应用程序的功能至关重要，而且可以在 Webpack 中轻松完成。
使用 Webpack 打包应用程序时，Webpack 会将所有内容打包到一个可部署/dist目录中。
应用程序部署到服务器后，当用户访问应用程序时，客户端（通常是浏览器）必须再次访问服务器以检索应用程序的所有资源。
这就是浏览器缓存应用程序资源的原因。本质上，它们将文件或模块保存到/dist目录中，以便用户下次刷新或访问浏览器时不必检索它已经记住的任何资源。
如何防止浏览器缓存 CSS 或我们已更改文件的包？
浏览器缓存文件可能会导致问题，因为如果我们更改已缓存的文件，浏览器可能不会更新它们，并会因为文件名未更改而假定文件与先前相同。
缓存清除背后的想法是，我们希望每次更改文件时都创建一个新文件名，如果没有更改则保持文件名不变。这样，当您更改文件时，当客户端向服务器发出请求以检索应用程序资产时，由于浏览器无法识别文件名，因此您更改的文件将会更新。幸运的是，Webpack 在Webpack 配置文件
中附带了一个名为的内置替换功能。 替换将根据资产内容是否已更改创建一个唯一的哈希值，仅在发生更改时更新。 当您将其添加到配置文件中的输出对象时，它将如下所示：output.filename[contenthash]
[contenthash]
[contenthash]

//the output object in module.exports from the webpack.config.js file:

output: {
    filename: "main.[contentHash].js",
    path: path.resolve(__dirname, "dist")
  },

所以，我希望这篇 Webpack 的介绍能够让你轻松理解，并解答你关于 Webpack 的一些疑问。Webpack 在后台完成了很多工作，使你的 React 应用能够正常运行，你只需要确保根据你的应用正确配置它即可。下次开发 React 应用时，不妨考虑自己配置 Webpack！