Webpack是什么？怎么打包模块？

本篇文章给大家分享《Webpack是什么？如何打包模块？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

Webpack 是一个现代 JavaScript 应用的静态模块打包工具，将 JS、CSS、图片等资源视为模块，通过依赖图打包为浏览器可运行文件，并通过 loader 处理非 JS 资源、plugin 扩展构建能力，支持代码分割与热更新。

Webpack 是一个用于现代 JavaScript 应用的静态模块打包工具。它把项目中所有资源（JS、CSS、图片、字体等）都视为模块，通过依赖关系图（dependency graph）将它们打包成一个或多个浏览器可运行的文件（如 bundle.js）。

Webpack 的核心作用：解决模块化与资源管理问题

浏览器原生只支持简单的 ，打开即可运行。

配置 Webpack（webpack.config.js）

当需求变复杂（比如要处理 CSS、自动注入 HTML），需手动配置：

在项目根目录创建 webpack.config.js：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

注意：style-loader 和 css-loader 需单独安装：npm install --save-dev style-loader css-loader。

常见打包流程与关键概念

• Entry：入口文件，Webpack 从这里开始构建依赖图
• Output：打包后文件的输出位置和命名规则
• Loader：翻译器，让 Webpack 能“读懂”非 JS 文件（如 .vue、.scss、.png）
• Plugin：增强器，执行资源优化、环境注入、生成 HTML 等任务
• Mode：指定 development（开发模式，带 source map）或 production（生产模式，自动压缩、Tree Shaking）

不复杂但容易忽略。理解入口、loader、plugin 这三块，就能应对大多数打包场景。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Webpack是什么？怎么打包模块？》文章吧，也可关注golang学习网公众号了解相关技术文章。