使用Webpack创建和打包一个基础网页项目的详细入门教程步骤

Web前端开发 / 2025-06-26 641 次阅读

在使用Webpack创建项目前先下载安装配置完Node.js。

安装配置Node.js

下载Node.js：https://nodejs.org/zh-cn/download
设置安装路径：node.js修改或自定义设置npm全局包的安装路径命令npm config set prefix
设置缓存目录：node.js设置或更改npm下载包的默认缓存目录命令npm config set cache
配置环境变量：node.js node_PATH环境变量的作用以及怎么配置node_PATH环境变量

安装使用Webpack

1、创建项目结构（可以按自己喜欢的结构创建，然后按实际结构配置路径）。

my-webpack-project/
├── src/
│ ├── index.js # 入口文件
│ ├── index.html # 原始 HTML（可选）
│ ├── style.css # CSS 文件
│ └── assets/ # 图片等资源
├── dist/ # 打包后的输出目录（自动生成）
└── webpack.config.js # Webpack 配置文件

2、打开系统的“Windows PowerShell(管理员)”或者用“Win+R”，进入项目目录，如项目路径是：D:\my-webpack-project，可以输入以下命令进入：

cd D:\my-webpack-project

3、初始化Webpack项目，命令：

npm init -y

会自动在项目根目录生成 package.json 文件，里面是关于这个项目的信息，如项目名称、版本、运行脚本等。

4、安装 Webpack 和必要依赖。

npm install webpack webpack-cli --save-dev
npm install html-webpack-plugin --save-dev  # 自动生成 HTML
npm install webpack-dev-server --save-dev # 开发服务器，非必要
npm install css-loader style-loader --save-dev  # 处理 CSS
npm install file-loader --save-dev  # 处理图片/字体（Webpack 5 可替换为 Asset Modules）

5、配置 Webpack。

在项目根目录创建 webpack.config.js 文件，并添加以下内容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 入口文件
    entry: './src/index.js',
  
    // 输出配置
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true, // 自动清理 dist 目录
    },
  
    // 模式：development/production
    mode: 'development',
  
    // 加载器（Loader）配置
    module: {
        rules: [
            // 处理 CSS
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            // 处理图片（Webpack 5 可直接使用 Asset Modules）
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
        ],
    },
  
    // 插件配置
    plugins: [
        new HtmlWebpackPlugin({
        template: './src/index.html', // 指定 HTML 模板
        filename: 'index.html',      // 生成的 HTML 文件名
    }),
  ],
};

以上配置仅为示例，请按实际项目情况调整，更详情的可参考：打包工具WebPack的配置文件webpack.config.js的基础配置参数

6、配置 npm 脚本。

编辑项目根目录的 package.json 文件，在调用脚本 scripts 那部分添加npm脚本：

{
    "scripts": {
        "build": "webpack", # 这是添加的脚本
        "start": "webpack --watch" # 这是添加的脚本
        "dev": "webpack serve --open" # 这是启动开发服务器
    }
}

7、开发示例项目

src/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack 示例</title>
</head>
<body>
    <h1>Hello Webpack!</h1>
    <img src="./assets/logo.png" alt="Logo">
</body>
</html>

src/style.css

body {
  background-color: #f0f0f0;
}

src/index.js

import './style.css'; // 导入 CSS
import logo from './assets/logo.png'; // 导入图片

// JavaScript 逻辑
document.querySelector('img').src = logo;

8、运行打包项目

npm run build

打包后的文件会自动生成到 dist 目录。

9、本地测试

可以直接鼠标双击打开生成的静态文件 dist/index.html，也可以启动开发服务器 webpack-dev-server 访问：

npm run dev

至此结束！

附：

入口（Entry）：从 index.js 开始分析依赖。
输出（Output）：打包后的文件存放位置。
加载器（Loader）：处理 CSS、图片等非 JS 资源。
插件（Plugin）：扩展功能（如生成 HTML）。

建议：

使用 mini-css-extract-plugin 分离 CSS 文件。
配置 Babel 支持 ES6+ 语法。
生产模式启用代码压缩（mode: 'production'）。
使用 optimization.splitChunks 分割代码。