1. 认识webpack 和 基本使用

WEI_Gaot
228 阅读9分钟

1. webapck是什么

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

总结:静态的模块化打包工具

  1. 静态static：我们可以将代码最终打包称为静态资源（部署到静态服务器）
  2. 模块化module：webpack支持各种的模块化开发。ES Module,CommonJS,AMD等
  3. 打包bundler：webpack将我们的代码进行打包

2. 安装webpack

先 npm init -y创建node环境

npm install webpack webpack-cli -g 全局安装

npm install webpack webpack-cli -D 局部安装 （推荐）

我们来区分一下 webpack 和 webpack-cli。虽然它们经常一起被提及和使用，但它们扮演的角色是不同的。

webpack

  • 核心库 (Core Library): webpack 包本身是 Webpack 的核心引擎和 API。它包含了 Webpack 进行模块打包所需的所有核心逻辑、功能和架构。

  • 功能:

    • 解析模块依赖关系，构建依赖图 (Dependency Graph)。
    • 通过配置的 Loaders 对不同类型的模块进行转换。
    • 通过配置的 Plugins 在构建流程的不同阶段执行各种任务（优化、资源管理等）。
    • 将处理后的模块打包成最终的 bundle 文件。
    • 提供了丰富的 API 供 webpack-cli 或其他 Node.js 程序调用。

  • 本质: 是一个 Node.js 模块，提供了程序化的接口。你可以通过 require('webpack') 或 import webpack from 'webpack' 在 Node.js 脚本中使用它来执行打包任务。

webpack-cli (Command Line Interface)

  • 命令行工具 (Command Line Tool): webpack-cli 包提供了一个命令行接口，让你可以在终端（命令行）中与 Webpack 核心库进行交互。

  • 功能:

    • 解析和执行你在终端输入的 webpack 命令。
    • 读取和解析 webpack.config.js（或其他指定的）配置文件。
    • 根据命令行参数和配置文件设置 Webpack 的选项。
    • 调用 webpack 核心库来执行实际的打包构建过程。
    • 在终端输出构建过程中的信息、统计数据、错误和警告。
    • 提供一些额外的命令行工具和命令（如 webpack serve 用于启动 webpack-dev-server，webpack info 查看环境信息，webpack init 初始化配置等）。

  • 本质: 是一个可执行的命令行工具，它封装了对 webpack 核心库的调用。

总结与关系:

  • webpack 是大脑和引擎，负责实际的打包工作和逻辑。
  • webpack-cli 是交互界面（命令行），负责接收用户指令（命令和配置），调用 webpack 引擎，并将结果反馈给用户。

你可以把它们的关系想象成：

  • webpack 就像汽车的引擎、变速箱、底盘等核心部件。
  • webpack-cli 就像汽车的方向盘、油门、刹车、仪表盘，让你能够驾驶和控制这辆汽车。

当你运行 npm run build 或 yarn build 时，实际上是 npm/yarn 通过 node_modules/.bin 目录下的可执行文件调用了 webpack-cli，webpack-cli 再去调用 webpack 核心库来完成打包。

Snipaste_2025-04-19_11-46-05.png

3. 使用在项目中基本使用webpack

安装：npm install webpack webpack-cli -D

Snipaste_2025-04-19_11-54-11.png

math.js

export function sum(m, n) {
  return m + n;
}

index.js

import { sum } from "./utils/math";  

const message = 'hello world'
console.log(message)
console.log(sum(20, 30))

在html中引用index文件。在浏览器查看会报错，浏览器还不支持esmodule的模块化

Snipaste_2025-04-19_11-59-16.png

我们使用npx webpack命令打包index.js文件。自动在根目录中生成dist文件夹和main.js文件

Snipaste_2025-04-19_12-02-41.png

在html中引用main文件。在浏览器查看。没有报错

Snipaste_2025-04-19_12-03-52.png

4. webpack中默认配置

使用npx webpack默认会找到src文件夹下的index.js文件。

如果没有index，或更改了index的文件名。再使用npx webpack会报错

如果我们想不使用index.js文件作为打包入口。我们需要指定文件npx webpack --entry 文件目录

案例：

  1. 将什么项目中的webpack中的index.js改为main.js
  2. 直接使用npx webpack会报错
  3. 使用 npx webpack --entry ./src/main.js
  4. 成功打包

我们不想使用webpack自动打包生成的dist文件夹和main.js文件。如何去改

使用npx webpack --entry ./src/main.js --output-filename bundle.js --output-path ./build

--output-filename：指定打包后的js文件

--output-path：指定打包自动生成的文件夹

上面的方法通常是对局部使用的，有时候可以当作全局（在文件较少的情况下）

如果我们还想其它的配置，那在终端下要敲多少单词呀😮

所以webpack将自己的相关的配置可以以文件的形式存在，默认集中在了webpack.config.js。放在根目录下，我们要手动添加

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
  },
};
  1. 为什么使用node的path？

因为此文件中的配置要使用绝对路径，为了配置方便和安全使用path

  1. 为什么使用module.exports导出配置？

Webpack 之所以使用 module.exports 来导出，是因为它最初是基于 CommonJS 模块规范 构建的，而这个规范是 Node.js 默认使用的模块系统。

可以将打包命令，集中在package.json中。

好处1：更加规范和安全

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },

好处2：使用不同的webpack.config.js打包时更方便

wk.config.js也可以当作webpack的打包文件

想使用不同的打包文件直接在package.json中修改文件名字就可以了

Snipaste_2025-04-19_12-46-53.png

5. 认识webpack的Loader

Webpack 是一个大厨，他的拿手绝活是做“JavaScript 大餐”。他只认识、也只会处理 JavaScript 这种“食材”。

但是呢，你想做的这个“网站大餐”里，光有 JavaScript 还不够，你还需要：

  • CSS （就像是菜的 调味料和装饰，决定好不好看）
  • 图片 （像是菜上面的 漂亮点缀）
  • Sass/Less （像是用 秘方或者速记法写的菜谱，不是标准菜谱语言）
  • 字体文件 （像是 特别定制的餐具）
  • TypeScript （像是用 另一种方言写的菜谱）

这时候，大厨 Webpack 就懵了：“哎呀！这些花花绿绿的东西（.css, .png, .scss, .ts 文件）是啥玩意儿？我看不懂啊！我只认识 JavaScript！”

这时候，Loader 就出场了！

你可以把 Loader 想象成大厨的各种“专门小助手”或者“翻译官” ：

  1. css-loader: 这个小助手专门负责看懂 CSS 调味料（.css 文件），搞清楚里面具体有哪些样式规则。
  2. style-loader: 这个小助手接手 css-loader 分析好的样式信息，然后知道怎么把这些调味料真正“抹”到菜上（把 CSS 用 <style> 标签塞进 HTML 页面里）。
  3. babel-loader / ts-loader: 这些小助手就像 翻译官。他们拿到用“方言”或“新潮写法”写的菜谱（比如 ES6+ 的 JS 或者 TypeScript），把它翻译成大厨能看懂的“普通话” JavaScript。
  4. file-loader / url-loader / 资源模块 (Asset Modules) : 这些小助手负责处理 图片、字体 这些实物。他们会把图片（.png）这样的“点缀”放到一个上菜时能找到的地方（比如复制到输出文件夹），然后告诉大厨这个点缀的 准确位置（URL） ，这样最终上菜时就能正确显示出来。

你在 Webpack 的配置文件（webpack.config.js）里告诉大厨：“喂，看到 .css 文件，就交给 css-loader 和 style-loader 这两个小助手去处理！” “看到 .ts 文件，就让 ts-loader 这个翻译官来翻译！”

所以，Loader 的作用就是在 Webpack 打包前，对各种类型的文件进行预处理（转换、翻译、加工），让 Webpack 能顺利地把它们整合到最终的“大餐”（打包文件）里去。

6. 学习webpack的loader简单配置

  1. webpack.config.js 文件: 这是 Webpack 的核心配置文件。当你运行 webpack 命令时，它会默认查找并读取这个文件来获取所有的构建指令。
  2. module 对象: 在 webpack.config.js 导出的配置对象中，有一个名为 module 的属性。这个属性专门用来配置 Webpack 如何处理项目中不同类型的文件模块。
  3. rules 数组: 在 module 对象内部，最重要的就是 rules 这个属性。它是一个数组，数组中的每一个元素都是一个对象，定义了一条规则。

一条规则 (Rule) 通常包含以下关键部分：

  • test: 这个属性的值通常是一个正则表达式 (RegExp) 。它用来匹配哪些文件应该应用这条规则。例如，/.css$/ 会匹配所有以 .css 结尾的文件。你也可以指定单独的文件，但我们一般不这么做

  • use: 这个属性指定了当 test 匹配成功时，应该使用哪些 Loader 来处理这些文件。

    • 如果只需要一个 Loader，可以直接写 Loader 的名字（字符串），例如：use: 'css-loader'。

    • 如果需要多个 Loader，需要提供一个数组。重要的是，Loader 的执行顺序是从右到左（或者说从下到上） 。例如：use: ['style-loader', 'css-loader']，这意味着 Webpack 会先用 css-loader 处理 CSS 文件，然后再把 css-loader 的处理结果交给 style-loader 处理。要记住执行顺序很重要

    • use 数组中的元素也可以是包含 loader 和 options 的对象，用于给 Loader 传递特定参数，例如：

      use: [
  'style-loader',
  {
    loader: 'css-loader',
    options: {
      // css-loader 的特定选项
      modules: true
    }
  }
]

  • exclude / include (可选): 这两个属性可以帮助你更精确地控制哪些文件应该（或不应该）被这条规则处理。通常用来排除 node_modules 目录下的文件，因为这些库通常已经是编译好的。例如：exclude: /node_modules/。

示例 webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 👇 这是配置 Loader 的关键部分
  module: {
    rules: [
      // 规则一：处理 CSS 文件
      {
        test: /.css$/i, // 匹配所有以 .css 结尾的文件（忽略大小写）
        use: ['style-loader', 'css-loader'], // 先用 css-loader 再用 style-loader
      },
      // 规则二：处理图片文件 (Webpack 5+ 使用内置 Asset Modules)
      {
        test: /.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource', // 使用 Webpack 内置的资源模块类型
      },
      // 规则三：处理 JavaScript 文件（使用 Babel 转译）
      {
        test: /.m?js$/, // 匹配 .js 或 .mjs 文件
        exclude: /node_modules/, // 排除 node_modules 目录
        use: {
          loader: 'babel-loader', // 使用 babel-loader
          options: { // 给 babel-loader 传递选项
            presets: ['@babel/preset-env']
          }
        }
      },
      // ... 你可以添加更多规则来处理 Sass, Less, TypeScript, Vue, React 等文件
    ],
  },
  // ... 其他配置，如 plugins, devServer 等
};

总之，记住：在 webpack.config.js 文件的 module.rules 数组里，为不同类型的文件（通过 test 匹配）指定要使用的 Loader（通过 use 指定） 。

7. 在webpack下面中使用css

使用css

我们不在html文件中直接引入css的文件 使用 Webpack 时，通常不需要在 HTML 文件中手动编写<link rel="stylesheet" href="..."> 标签来引入 CSS 文件。

webpack默认不会解析css的文件的

核心原因在于：Webpack 将 CSS 视为你应用程序依赖图（Dependency Graph）中的一个模块，就像处理 JavaScript 文件一样。  你不再需要手动在 HTML 中管理 CSS 链接，而是通过在 JavaScript 文件中 import CSS 来引入样式。Webpack 会利用特定的加载器（Loaders）和插件（Plugins）来处理这些 CSS 导入，并最终将样式应用到你的页面上。

使用loader加载css文件有三种方法：

  1. 内联方法

接下来项目中要讲

  1. 配置方法

在js文件引入import 'css-loader!../css/style.css' !是用来分割的

  1. cli方法（webpack5中不使用）
在项目中使用

  1. npm init -y

  2. npm install webpack webpack-cli -D

  3. 添加webpack.config.js文件

  4. 下载用来解析css文件的loader：npm install style-loader css-loader -D

  5. 在webpack文件中配置

Snipaste_2025-04-19_15-02-26.png

//index.js
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "./dist"),
  },
  module: {
    rules: [
      {
        test: /\.css/,
        use: [
          //执行顺序是从右到左，冲下到上的
          { loader: "style-loader" },
          { loader: "css-loader" },
        ],
      },
    ],
  },
};


// 直接在 JavaScript 文件里导入 CSS 文件！
import './css/style.css';

console.log('Webpack 启动了 CSS 应该已经应用！');

console.log('添加了css文件')

<!DOCTYPE html>
<html>
<head>
    <title>Webpack CSS 示例</title>
    <!-- 注意：这里没有 <link rel="stylesheet" ...> 标签！ -->
</head>
<body>
    <h1>你好 Webpack</h1>

    <!-- Webpack 打包后的 JS 文件会在这里引入 -->
    <script src="../dist/main.js"></script>
</body>
</html>

  1. css-loader作用是解析css的代码的。style-loader作用是帮助解析后的css代码在屏幕显示的。因为modele中use的执行顺序有点和正常不一样，所以代码{loader: 'css-loader'}在下面

  2. 使用npx webpack 命令（在这里没有packjson文件中配置）

Snipaste_2025-04-19_15-11-52.png

8. webpack优化css打包

//方法1
use: [
          //执行顺序是从右到左，冲下到上的
          { loader: "style-loader" },
          { loader: "css-loader" },
],

//方法2
use: ["style-loader", "css-loader"],


//方法3 loader 只写一个
loader: 'css-loader'
avatar
文章
阅读
粉丝