Webpack第1篇，Webpack初步应用，Webpack基础（Webpack是什么，Webpack的基本使用，Webpack有什么用，如何使用，Webpack手把手教学）

北城笑笑

已于 2024-08-13 17:41:19 修改

阅读量1k

点赞数 13

分类专栏： Webpack 文章标签：前端 webpack

于 2024-08-09 19:12:53 首次发布

本文链接：https://blog.csdn.net/weixin_65793170/article/details/140925732

版权

Webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

Webpack 是一款用于现代 JavaScript 应用程序的模块打包工具（module bundler）。它把项目中的所有依赖，包括JavaScript文件、CSS、图片、字体等静态资源，按照你定义的规则和配置，打包成一个或多个优化过的静态文件。这些打包后的文件可以被浏览器加载并运行，使得你的应用可以在Web上运行。

尽管市场上诞生了众多打包工具，如 Vite、Parcel、Rollup 等，但是 Webpack 凭借拥有着极其丰富的生态系统，仍在模块打包工具中一直保持着领先地位。这里带大家，一起介绍、学习下 Webpack 的初步应用和核心概念。

一. Webpack 详细介绍

1. 介绍和理解

首先，Webpack是一个款前端构建工具，用来进行模块化打包，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的打包文件。

2. 五大核心概念

Entry（入口）

Output（输出）

Loaders（加载器）

Plugins（插件）

Mode（模式）

3. 核心概念的具体定义

入口(Entry) ：入口点指示 Webpack 应该从哪个或哪些模块开始打包。它可以是一个字符串（指向单个文件）、数组（指向多个文件）或一个对象（定义多个入口点）。Webpack 会从这里开始递归地查找和处理依赖项。

输出(Output) ：输出配置决定了输出文件的名称、路径和格式。通常情况下，你需要指定输出文件的目录（output.path）和文件名（output.filename）。Webpack 会将所有模块及其依赖项打包到这个指定的输出文件中。

加载器(Loader) ：加载器允许 Webpack 处理非 JavaScript 文件。加载器本质上是可配置的函数，它们接受模块源代码作为输入并输出转换后的代码。例如，你可以使用 babel-loader 来将现代 JavaScript 转换为浏览器兼容的代码，或者使用 file-loader 来处理图片和字体文件。

插件(Plugin) ：插件是具有更广泛功能的 Webpack 扩展点，可以修改编译结果、优化输出、注入 HTML 文件等。插件在特定的时机运行，可以执行更复杂的任务，比如清理旧的 build 文件、压缩代码、生成 source map 等。

模式(mode)：Webpack 支持两种模式：development 和 production。每种模式都有默认的优化设置，例如在生产模式下会自动开启代码压缩。

二.Webpack 初步使用

1. 创建测试环境

首先，我们模拟项目目录，分别创建public、src文件夹，以及 public>index.html 文件和src>main.js>、src>js>clone.js、src>js>sum.js文件，用于初步环境的应用，然后在文件夹中分别写入文件内容。

首先是， src > js > clone.js、

// clone.js
export default function Clone(obj) {
    console.log("Clone.js")
    if (typeof obj !== "object" || obj === null) { return obj }
    let res = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            res[key] = deepClone(obj[key]);
        }
    }
    return res;
}

然后是，src > js > sum.js、

// sum.js
export default function Sum(...arr) {
    console.log("Sum.js")
    return arr.reduce((prev, cur) => prev + cur, 0)
}

src > main.js、

// main.js
import Clone from "./js/clone"
import Sum from "./js/sum"


var obj = {
    name: "longlong",
    age: 18,
    status: {
        hoppy: "sduty",
    }
}
console.log(Sum(1, 2, 3, 4, 5), 123)
console.log(Clone(obj.name = "test"), obj, 456)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack</title>
  </head>
  <body>
    <h1>Webpack 初步使用</h1>
    <script src="../src/main.js"></script>
  </body>
</html>

最后，我们打开 index.html 文件

可以看到控制台直接报错，这个报错表示在一个没有被视为模块的 JavaScript 文件中使用了 import 语句。这是因为ES6模块语法，在浏览器中是并不识别的，而JavaScript 文件在浏览器和 Node.js 环境中使用的是非模块化的脚本语法（也称为脚本模式）。在这种模式下，import 和 export 语句是无效的。

所以如果你在非模块化的 JavaScript 文件中使用 import 语句，会导致 Uncaught SyntaxError: Cannot use import statement outside a module 错误。

要使用模块语法，需要明确告诉 JavaScript 运行时环境（浏览器或 Node.js）该文件应该被当作一个模块处理。这时候就需要用到 Webpack 进行编译，构建成浏览器能识别的语法。

2. 初步实际应用

（1）初始化命令

要想使用 Webpack 构建工具，我们需要把依赖包下载下来才能使用，所以这里我们首先需要，初始化一个新的 npm 项目。直接在文件夹根目录，执行以下命令，生成 package.json 初始文件

npm init -y

这里的npm init -y 是 Node.js 包管理器（npm）提供的一个命令，用于快速初始化一个新的 npm 项目。这个命令的作用是创建一个默认的 package.json 文件，包含项目的基本配置信息。

可以看到根目录执行 npm init -y ，生成 package.json 文件。

（2）修改路径

这里需要将 package.json 文件中的主文件路径"main": "index.js"，修改成自己需要的路径

"main": "./src/main.js",

（3）安装打包工具和命令行工具

直接执行以下命令，安装到开发环境，依赖项仅在开发过程中需要，而不是在生产环境中

npm i webpack webpack-cli -D

安装介绍：

Webpack 是一个静态模块打包工具，用于将应用程序的所有依赖（包括 JavaScript、CSS、图像等）打包成一个或多个优化过的文件。

Webpack CLI（命令行界面）是 Webpack 的命令行工具，用于与 Webpack 进行交互。它允许开发者通过命令行配置和运行 Webpack 的打包过程。

安装完成后，可以在 package.json 文件中看到，同时还会生成 node_modules 文件，

然后就就可以执行 webpack 相关命令了。

（4）注意事项

webpack代码外层文件不能有中文，且必须是安装了nodejs才能使用。

文件名字，就是 "name": "wpbk_init"，不能以 webpack 命名，容易冲突，可能会出现 npm init -y 安装不下来的情况。

（5）执行打包命令，启用 Webpack

执行以下命令时，会使用webpack ，指定打包文件./src/main.js，并且输出到开发环境/生产环境

npx webpack ./src/main.js --mode=development

// 打包指定文件./src/main.js，输出到开发环境

npx webpack ./src/main.js --mode=production

// 打包指定文件./src/main.js，输出到生产环境

打包完成后，会生成 dist 目录

和打包信息

（6）打包结果

这里我们直接将 index.html 中的 src>main.js 路径，换成打包后 dist>main.js 文件路径

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webpack</title>
  </head>
  <body>
    <h1>Webpack 初步使用</h1>
    <script src="../dist/main.js"></script>
  </body>
</html>

然后打开控制台，查看，

可以看到 main.js 中的函数执行成功。

（7）打包区别

One. 开发环境

执行 npx webpack ./src/main.js --mode=development 后，

npx webpack ./src/main.js --mode=development命令使用开发模式进行打包，生成未压缩的代码，支持调试和源映射，适合开发过程中使用。

Two. 生产环境

执行 npx webpack ./src/main.js --mode=production 后，

npx webpack ./src/main.js --mode=production 命令使用生产模式进行打包，生成经过优化和压缩的代码，适合部署到生产环境。

当然，开发和生产环境，代码同样都没有问题，可以正常执行。

（8）小结

Webpack打包的本质，就是将浏览器不能识别的语法，编译成浏览器能识别的语法。
这里执行打包命令后，如果更改sum.js、clone.js、main.js文件内容时不再生效，需要重新打包后生效。

Webpack 本身功能较少，只能处理 JS 资源，一旦遇到 CSS 等其它资源就会报错。所以我们学习 webpack ，就是主要学习如何处理其它资源。

（9）大致流程

1、npm init -y

// 初始化，生成package.json文件

2、./src/main.js

// 修改打包文件路径

3、npm i webpack webpack-cli -D

// 配置安装打包器和命令行工具

4、npx webpack ./src/main.js --mode=development

// 指定打包文件和输出到：开发环境

5、npx webpack ./src/main.js --mode=production

// 指定打包文件和输出到：生产环境