Webpack 入门：打包工具的基本使用

小笔学长2026-01-01 11:05

Webpack 入门：打包工具的基本使用

在前端开发中，随着项目规模的不断扩大，代码文件数量增多、依赖关系复杂，为了提高开发效率和代码的可维护性，我们需要对代码进行打包处理。Webpack 就是一款强大的前端打包工具，它可以将多个模块打包成一个或多个文件，优化资源加载，提升项目性能。本文将带你入门 Webpack，了解其基本使用方法。

什么是 Webpack

Webpack 是一个模块打包工具，它会从一个或多个入口文件开始，递归地分析模块之间的依赖关系，将所有的模块打包成一个或多个文件。Webpack 不仅可以处理 JavaScript 文件，还可以处理 CSS、图片、字体等各种类型的文件，通过加载器（loader）和插件（plugin）可以对不同类型的文件进行转换和优化。

安装 Webpack

在开始使用 Webpack 之前，我们需要先安装它。Webpack 有两个核心包：webpack 和 webpack-cli，webpack-cli 提供了在命令行中使用 Webpack 的接口。

首先，确保你已经安装了 Node.js 和 npm。然后，在项目根目录下执行以下命令来安装 Webpack：

bash 复制代码 
npm install webpack webpack-cli --save-dev

这里使用 --save-dev 标志将 Webpack 安装为开发依赖，因为它只在开发和构建阶段使用。

初始化项目

我们先创建一个简单的项目结构，用于演示 Webpack 的基本使用。在项目根目录下创建以下文件和文件夹：

复制代码 
project/
├── src/
│   ├── index.js
│   └── print.js
└── dist/
    └── index.html

src/index.js 是项目的入口文件，src/print.js 是一个简单的模块，dist/index.html 是项目的 HTML 文件。

src/index.js 的内容如下：

javascript 复制代码 
import _ from 'lodash';
import printMe from './print.js';

function component() {
  const element = document.createElement('div');

  // Lodash 现在通过 ES Modules 导入
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.onclick = printMe;

  return element;
}

document.body.appendChild(component());

src/print.js 的内容如下：

javascript 复制代码 
export default function printMe() {
  console.log('I get called from print.js!');
}

dist/index.html 的内容如下：

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>
  <!-- 这里会动态插入打包后的脚本 -->
  <script src="main.js"></script>
</body>
</html>
配置 Webpack

Webpack 可以通过配置文件来定制打包行为。在项目根目录下创建一个 webpack.config.js 文件，内容如下：

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
  • entry：指定项目的入口文件，Webpack 会从这个文件开始分析模块依赖。
  • output：指定打包后的文件输出配置，filename 是打包后的文件名，path 是输出文件的目录，使用 path.resolve 方法确保路径的正确性。
运行 Webpack

在项目根目录下执行以下命令来运行 Webpack 打包：

bash 复制代码 
npx webpack --config webpack.config.js

npx 是 npm 自带的工具，用于执行本地安装的命令。--config 参数指定使用的配置文件。执行完上述命令后，Webpack 会根据配置文件将 src/index.js 及其依赖的模块打包成 dist/main.js 文件。

Webpack 加载器（Loader）

Webpack 本身只能处理 JavaScript 文件，如果要处理其他类型的文件，如 CSS、图片等，就需要使用加载器（loader）。加载器可以对不同类型的文件进行转换，使其可以被 Webpack 处理。

处理 CSS 文件

我们先安装 style-loader 和 css-loader：

bash 复制代码 
npm install style-loader css-loader --save-dev
  • css-loader：用于解析 CSS 文件中的 @import 和 url() 等语句，处理 CSS 文件之间的依赖关系。
  • style-loader：将 CSS 代码插入到 HTML 文件的 <style> 标签中。

然后在 webpack.config.js 中配置加载器：

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

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

module.rules 是一个数组，用于配置不同类型文件的加载器规则。test 是一个正则表达式，用于匹配文件类型，use 是一个数组，指定使用的加载器，加载器的执行顺序是从右到左。

现在，我们在 src 目录下创建一个 styles.css 文件，并在 src/index.js 中引入它：

css 复制代码 
/* src/styles.css */
body {
  background-color: lightblue;
}
javascript 复制代码 
// src/index.js
import _ from 'lodash';
import printMe from './print.js';
import './styles.css';

function component() {
  const element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.onclick = printMe;

  return element;
}

document.body.appendChild(component());

再次运行 Webpack 打包，CSS 文件会被处理并插入到 HTML 文件中。

处理图片文件

我们可以使用 file-loader 来处理图片文件。安装 file-loader：

bash 复制代码 
npm install file-loader --save-dev

在 webpack.config.js 中配置加载器：

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

在 src 目录下添加一张图片，如 src/image.png，并在 src/index.js 中引入它：

javascript 复制代码 
// src/index.js
import _ from 'lodash';
import printMe from './print.js';
import './styles.css';
import icon from './image.png';

function component() {
  const element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.onclick = printMe;

  // 添加图片
  const myIcon = new Image();
  myIcon.src = icon;
  element.appendChild(myIcon);

  return element;
}

document.body.appendChild(component());

运行 Webpack 打包后，图片会被复制到 dist 目录下，并在 HTML 中正确显示。

Webpack 插件（Plugin）

Webpack 插件可以在 Webpack 构建过程的不同阶段执行特定的任务，如生成 HTML 文件、压缩代码等。

生成 HTML 文件

我们可以使用 html-webpack-plugin 插件来自动生成 HTML 文件，并将打包后的 JavaScript 文件自动插入到 HTML 中。安装 html-webpack-plugin：

bash 复制代码 
npm install html-webpack-plugin --save-dev

在 webpack.config.js 中配置插件：

javascript 复制代码 
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack App',
    }),
  ],
};

HtmlWebpackPlugin 会自动生成一个 HTML 文件，并将打包后的 main.js 文件插入到 HTML 中。

清理 dist 目录

在每次打包之前，我们可能需要清理 dist 目录中的旧文件。可以使用 clean-webpack-plugin 插件来实现。安装 clean-webpack-plugin：

bash 复制代码 
npm install clean-webpack-plugin --save-dev

在 webpack.config.js 中配置插件：

javascript 复制代码 
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Webpack App',
    }),
  ],
};

每次打包前，CleanWebpackPlugin 会自动清理 dist 目录。

开发服务器

为了提高开发效率，我们可以使用 webpack-dev-server 来启动一个本地开发服务器，它会在文件发生变化时自动重新打包并刷新页面。

安装 webpack-dev-server：

bash 复制代码 
npm install webpack-dev-server --save-dev

在 package.json 中添加一个启动脚本：

json 复制代码 
{
  "scripts": {
    "start": "webpack serve --open"
  }
}

现在，我们可以通过以下命令启动开发服务器：

bash 复制代码 
npm start

--open 标志会自动打开浏览器访问开发服务器。

总结

通过本文的介绍，你已经了解了 Webpack 的基本使用方法，包括安装、初始化项目、配置加载器和插件、使用开发服务器等。Webpack 可以帮助我们更好地管理项目的模块依赖，优化资源加载，提升项目性能。在实际项目中，你可以根据需求进一步配置 Webpack，使用更多的加载器和插件来满足不同的开发需求。

避坑要点
  • 加载器顺序 ：加载器的执行顺序是从右到左，所以在配置 use 数组时要注意顺序。
  • 版本兼容性：不同版本的 Webpack 和其插件、加载器可能存在兼容性问题，在安装时要注意版本匹配。
  • 配置文件路径 ：在配置 output.path 等路径时，要使用 path.resolve 方法确保路径的正确性，避免在不同操作系统上出现问题。
Webpack 工作流程示意图

入口文件
模块解析
加载器处理
插件处理
打包输出

这个示意图展示了 Webpack 的基本工作流程：从入口文件开始，解析模块依赖，使用加载器处理不同类型的文件，通过插件进行额外的处理，最后将所有模块打包输出。

通过以上内容，你对 Webpack 的基本使用有了一个全面的了解，可以开始在自己的项目中使用 Webpack 进行打包处理了。在后续的学习中，你可以深入研究 Webpack 的高级配置和优化技巧，进一步提升项目的性能和开发效率。

相关推荐
黎明初时2 小时前
react基础框架搭建4-tailwindcss配置：react+router+redux+axios+Tailwind+webpack
前端·react.js·webpack·前端框架
小沐°2 小时前
vue3-父子组件通信
前端·javascript·vue.js
铅笔侠_小龙虾2 小时前
Ubuntu 搭建前端环境&Vue实战
linux·前端·ubuntu·vue
yuhaiqun19892 小时前
发现前端性能瓶颈的巧妙方法：建立“现象归因→分析定位→优化验证”的闭环思维
前端·经验分享·笔记·python·学习·课程设计·学习方法
树叶会结冰2 小时前
TypeScript---循环：要学会原地踏步，更要学会跳出舒适圈
前端·javascript·typescript
唐叔在学习2 小时前
前端响应式设计实践：布局与字体自适应方案
前端·响应式设计
海云前端12 小时前
如果要设计一个开源的Code EditorSDK，你会向开发者暴露哪些API？
前端
Access开发易登软件2 小时前
Access 数据可视化：如何制作箱形图
前端·数据库·vba·access·access开发
Tiramisu20232 小时前
【VUE】删除 node_modules几种高效方法
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Linux下V2Ray安装配置指南03jdk21下载、安装（Windows、Linux、macOS）04Claude Code Skills 实用使用手册05从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击06UV安装并设置国内源072025 最新教程：注册并切换到美区 Apple ID08【踩坑笔记】50系显卡适配的 PyTorch 安装09Google Antigravity Agent 编辑器操作教程10电脑检测软件—图吧工具箱