webpack: overview, config ( plugin loader alias..

aPurpleBerry2026-02-12 8:50

get confused and overwhelmed

文章目录

参考

BV11g411y7Sd

overview

主要用于将各种资源（如 JavaScript、CSS、图片等）作为模块进行管理和打包

all types of loaders and plugins that you can use

  • 为什么需要有webpack?
    • 传统网页开发项目中，需要通过在HTML中引入大量的JS CSS等文件，可能会导致 命名冲突、页面体积变大 ，如果是第三方库，需要加载所有的代码（第三方库 如 jQuery 通常以一个完整的文件形式提供。，比如你只用到 jQuery 的一个小功能，但实际引入的是整个 jquery.js 文件，里面包含了所有功能代码）
    • 在nodejs出现之后，JS项目支持通过require进行模块化开发，并且支持npm方便管理依赖。借着nodejs和浏览器js的一致性，前端项目开始在nodejs下开发，完成之后把代码构建成浏览器支持的形式
      • Node.js 出现之前的前端开发现状（JS 项目通常只能在浏览器环境运行，依赖管理和模块化能力较弱，难以组织大型项目）
      • nodejs出现之后，Node.js 和浏览器都使用 JavaScript，开发者可以在 Node.js 环境下编写前端代码。前端项目在 Node.js 环境下开发（如使用 ES6、模块化、npm 管理依赖） ，然后通过构建工具（如 Webpack、Rollup）将代码转换为浏览器可识别的形式（如 ES5、合并打包、压缩等）。
    • webpack 就是进行这一步构建操作的，把 nodejs 模块化的代码，转换为浏览器可执行的代码。在 wbp 中任何文件都可以通过 import 导入，只要有对应的 loader 就可以，在打包过程中，还可以通过插件 plugin 干预打包过程，例如剔除不必要的代码，形成体积更小的项目

demo

javascript 复制代码 
mkdir demo
cd demo
yarn add -y (这里 -y 的意思是生成的的 package.json 文件所有的配置项都取默认值，就不会一条条询问
但我使用的是 pnpm init(Unlike `npm`, pnpm does not support the `-y` option for `init`)

pnpm i webpack webpack-cli -D  添加开发者依赖，因为 wbp 只在开发的时候有用到，她最后打包好的文件中，不需要 wbp 了
code . 打开当前目录

新建 src：放置源代码 
新建 src/index.js
新建 index.html 引入 js 文件

npx webpack 这样就执行了打包命令，npx 可以直接运行 node modules下安装的库的自带的命令行，而不用 nodemodules 的相对路径
（此时 会出现 dist 目录，然后里面有一个 main.js）

讲index.html里引入的js 从src换成 dist

新建 src/data.js，随便写一个 export 语句，再在 index.js 中引入，重新 npx webpack 打包，会发现 dist/main.js 中有做简化

新建 webpack.config.js

webpack.config.js

这里面用的是 nodejs 的导出语法

javascript 复制代码 
module.exports = {}

mode: 写开发者模式的话，打包的 js 会多很多代码

loader

css

为什么webpack 处理 import './css' 一定需要loader？

  1. Webpack 允许你把各种资源（JS、CSS、图片等）都当作"模块"来导入。但本质上，只有 JS 能被直接解析和执行，其他类型的文件需要"转译"成 JS。
  2. JS 本身不支持直接导入 CSS。JS 本身不支持直接导入 CSS
  3. Loader 的作用：没有 loader，Webpack 不知道如何处理非 JS 文件，会报错。
    • 当你写 import './style.css'，Webpack 会调用配置好的 loader（如 css-loader、style-loader）：
    • css-loader：把 CSS 文件内容转成 JS 模块，返回字符串或对象。
    • style-loader：把 CSS 内容插入到页面 <style> 标签里，实现样式生效。
javascript 复制代码 
1 下载
pnpm i -D css-loader style-loader
2 配置文件中配置
javascript 复制代码 
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,           // 匹配所有 .css 文件
        use: ['style-loader', 'css-loader'] // 使用的 loader，从后往前执行
      }
    ]
  }
}
图片
  • 图片可以像 JS 模块一样 import 导入。
  • 需要配置合适的 loader（Webpack 5 推荐 asset/resource）。
  • 导入后可以直接在代码中用变量引用图片路径。
javascript 复制代码 
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        type: 'asset/resource', // Webpack 5 推荐用法
      }
    ]
  }
}

导入 + 使用

javascript 复制代码 
import logo from './assets/logo.png';

<img src={logo} alt="Logo" />
babel-loader

babel-loader 是 Webpack 的一个 Loader，用于将 ES6+、TypeScript 或其他现代 JavaScript 代码转换为兼容旧浏览器的 ES5 代码。它是 Babel 与 Webpack 的桥梁。

javascript 复制代码 
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,                  // 匹配所有 .js 文件
        exclude: /node_modules/,        // 排除 node_modules
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] // 使用 Babel 预设
          }
        }
      }
    ]
  }
}

plugin

html-webpack-plugin

html-webpack-plugin 插件作用：根据模板或默认配置，自动生成一个 HTML 文件，并将 webpack 打包生成的 JS/CSS 等资源自动插入到 HTML 中。

javascript 复制代码 
下载
pnpm i html-webpack-plugin -D

webpack.config.js 导入
const HtmlWebpackPlugin = require("html-webpack-plugin")
--------------------
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "production", // 写开发者模式的话
    entry: "./src/index.js",
    output: {
        filename: "dist.js",
        path: path.resolve(__dirname, "output")
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '博客' 传递参数
        })
    ],
    module: {
	        ...
    }
}
terser-webpack-plugin

terser-webpack-plugin 是 Webpack 官方推荐的 JavaScript 代码压缩（minify）插件

开发设置

webpack-dev-server 是专为 webpack 项目设计的开发服务器

  • webpack-dev-server 启动后，所有打包结果（如带哈希的 JS 文件）都存储在内存中，不会真正写到你本地的 dist 或 output 目录。
  • 浏览器访问时，webpack-dev-server 会把内存中的最新文件直接提供给你，但你在本地文件夹里看不到这些文件。
  • 怎么验证呢？ 浏览器开发者工具， <script src="..."> 标签引用的 JS 文件名是有变化的，但本地输出目录没有
javascript 复制代码 
pnpm i -D webpack-dev-server

指定去哪里加载代码
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "production", // 写开发者模式的话
    entry: "./src/index.js",
    output: {
        filename: "dist.js",
        path: path.resolve(__dirname, "output")
    }
    devServer: {
        static: './output'
    }
}

// package.json
{
  "name": "0210_demo",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open" 加这个
  }
}

文件名hash作用

  • 为什么要加 hash？
    • 浏览器缓存机制：浏览器会缓存静态资源（如 JS、CSS），下次访问时直接读取本地缓存，提升加载速度。
    • 缓存失效问题：如果文件内容变了，但文件名没变，浏览器可能不会重新加载最新文件，导致用户看到旧代码。
    • 解决方案：文件名中加上内容哈希（contenthash），每次内容变动时，文件名也会变，浏览器自动重新下载最新文件。
javascript 复制代码 
module.exports = {
    mode: "production", // 写开发者模式的话
    entry: "./src/index.js",
    output: {
        // filename: "dist.js",
        filename: "[name].[contenthash].js",
        path: path.resolve(__dirname, "output")
    },

路径别名

javascript 复制代码 
module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'utils': path.resolve(__dirname, 'src/utils'),
      // 可以配置多个别名
    }
  }
}

备注

VS Code中用 Live Server 打开 HTML 与直接点击的区别

live server 是 vs code 的一个插件，用来实时预览 html 文件的

  1. Live Server 打开 HTML
  • 原理：Live Server 在本地启动一个开发服务器（通常是 HTTP），通过 http://localhost:端口号 访问页面。
  • 优点：
    • 自动刷新：保存文件后页面会自动刷新，方便开发调试。
    • 模拟真实环境：以服务器方式访问，能模拟生产环境下的行为（如 AJAX、fetch、跨域等）。
    • 支持相对路径：资源引用更准确，避免直接打开可能出现的路径问题。
    • 支持后端接口调试：可以与本地或远程 API 进行交互。
  • 典型访问方式：http://localhost:5500/index.html
  1. 直接点击 HTML 文件（双击或右键用浏览器打开）
  • 原理：直接用浏览器打开本地文件，访问方式为 file:// 协议。
  • 缺点：
    • 无自动刷新：修改文件后需手动刷新页面。
    • 路径问题：某些资源引用（如相对路径、模块化 JS）可能因路径解析不同而出错。
    • 受限于浏览器安全策略：如 AJAX 请求、fetch 等可能因同源策略被阻止。
    • 无法模拟服务器环境：部分功能（如路由、后端接口）无法正常测试。
  • 典型访问方式：file:///C:/your/path/index.html

nodejs path 模块

其实这个模块也从侧面反映出 require 是动态运行时使用的

javascript 复制代码 
const path = require("path");

path 是 Node.js 内置的一个核心模块，专门用来处理和转换文件路径。因为它内置于 Node.js，所以不需要额外安装，直接 require("path") 就可以使用。
为什么需要它？ 不同操作系统（如 Windows、macOS、Linux）的路径分隔符是不同的（Windows 用 \，macOS/Linux 用 /）。如果手动拼接字符串（例如 "./output/"），代码在不同系统上可能会出错。path 模块提供的方法可以确保你的路径处理逻辑在所有平台上都能正确工作。

javascript 复制代码 
__dirname

__dirname 是 Node.js 环境中的一个全局变量 （不是 path 模块的一部分）。

它代表 当前正在执行的脚本文件所在的目录的绝对路径。

javascript 复制代码 
my-project/
├── webpack.config.js  <-- 当前执行的文件
├── src/
│   └── index.js
└── package.json

在 my-project 目录下运行 Webpack 时
webpack.config.js 文件被执行。
在这个文件中，__dirname 的值就是 my-project 文件夹的绝对路径
javascript 复制代码 
path.resolve([...paths])

path.resolve() 是什么？

这是 path 模块最重要的方法之一。它的作用是：将一系列路径或路径片段解析为一个绝对路径。

  • 工作方式：它会从右到左处理传入的路径参数，直到构造出一个绝对路径。如果到最左边还没构造出绝对路径，就会使用当前工作目录。
  • 在本例中的作用：path.resolve(__dirname, "output")
    • 接收到第一个参数 __dirname，它已经是一个绝对路径
相关推荐
mCell4 小时前
如何零成本搭建个人站点
前端·程序员·github
mCell5 小时前
为什么 Memo Code 先做 CLI：以及终端输入框到底有多难搞
前端·设计模式·agent
恋猫de小郭5 小时前
AI 在提高你工作效率的同时，也一直在增加你的疲惫和焦虑
前端·人工智能·ai编程
少云清5 小时前
【安全测试】2_客户端脚本安全测试 _XSS和CSRF
前端·xss·csrf
银烛木5 小时前
黑马程序员前端h5+css3
前端·css·css3
m0_607076605 小时前
CSS3 转换，快手前端面试经验，隔壁都馋哭了
前端·面试·css3
听海边涛声6 小时前
CSS3 图片模糊处理
前端·css·css3
IT、木易6 小时前
css3 backdrop-filter 在移动端 Safari 上导致渲染性能急剧下降的优化方案有哪些？
前端·css3·safari
0思必得06 小时前
[Web自动化] Selenium无头模式
前端·爬虫·selenium·自动化·web自动化
anOnion6 小时前
构建无障碍组件之Dialog Pattern
前端·html·交互设计
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05Linux下V2Ray安装配置指南06openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决07AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南08Vue-skills的中文文档09OpenClaw Chrome扩展使用教程 - 浏览器中继控制10在Trae中使用Pencil MCP