JavaScript工程化②｜Webpack5基础配置，打包你的第一个项目

author: 专注前端开发，分享JavaScript干货

title: JavaScript工程化②｜Webpack5基础配置，打包你的第一个项目
update: 2026-04-28
tags: JavaScript,Webpack,打包,loader,plugin,前端工程化,模块打包

作者：专注前端开发，分享JavaScript干货

更新时间：2026年4月

适合人群：掌握JS基础，想学习前端打包工具的开发者

前言：为什么需要Webpack？

现代前端项目包含：JS、CSS、图片、字体等多种资源。

Webpack 把这些资源都当作模块，打包成浏览器可运行的文件。

一、Webpack 核心概念

概念	说明
`Entry`	入口文件，Webpack 打包的起点
`Output`	输出配置，打包后的文件存放位置
`Loader`	处理非JS文件（CSS、图片等）
`Plugin`	扩展 Webpack 功能
`Mode`	打包模式：`development` 或 `production`

二、安装与初始化

bash 复制代码

# 1. 初始化项目
mkdir webpack-demo && cd webpack-demo
npm init -y

# 2. 安装 webpack（开发依赖）
npm i -D webpack webpack-cli

# 3. 创建目录结构
mkdir src dist
touch src/index.js src/style.css index.html webpack.config.js

三、基础配置（webpack.config.js）

javascript 复制代码

const path = require('path');

module.exports = {
    // 模式：development / production
    mode: 'development',
    
    // 入口文件
    entry: './src/index.js',
    
    // 输出配置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        clean: true // 每次打包前清空 dist
    },
    
    // 模块配置（Loader）
    module: {
        rules: [
            // 处理 CSS
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            },
            // 处理图片
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource'
            }
        ]
    },
    
    // 插件配置
    plugins: [
        // HTML 模板插件
        new (require('html-webpack-plugin'))({
            template: './index.html'
        })
    ],
    
    // 开发服务器
    devServer: {
        static: './dist',
        port: 3000,
        open: true
    }
};

四、安装必要的 Loader 和 Plugin

bash 复制代码

# CSS Loader
npm i -D style-loader css-loader

# HTML 插件
npm i -D html-webpack-plugin

# 开发服务器
npm i -D webpack-dev-server

# Babel（处理 ES6+ 语法）
npm i -D babel-loader @babel/core @babel/preset-env

五、Babel 配置（处理 ES6+）

javascript 复制代码

// webpack.config.js 中添加
module.exports = {
    // ... 其他配置
    module: {
        rules: [
            // ES6+ 转 ES5
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            // CSS...
            // 图片...
        ]
    }
};

六、package.json 脚本

json 复制代码

{
  "scripts": {
    "build": "webpack",
    "dev": "webpack serve"
  }
}

bash 复制代码

# 开发模式（带热更新）
npm run dev

# 生产打包
npm run build

七、知识卡

概念	说明
`entry`	入口文件
`output`	输出配置
`loader`	处理非JS文件
`plugin`	扩展功能
`babel-loader`	ES6+ 转 ES5
`html-webpack-plugin`	生成HTML文件
`webpack-dev-server`	开发服务器

八、课后作业

配置一个 Webpack 项目，引入 Bootstrap CSS
添加图片加载器，在项目中使用图片
配置多入口，打包出两个独立的JS文件

有问题欢迎评论区留言，大家一起讨论！