Webpack基础

用户80613816659
3 阅读3分钟

当然可以！下面是一份 的复习指南，适合用于系统性地回顾 Webpack 的核心概念、配置方式以及常见实践。我们将从零开始搭建一个简单的 Webpack 项目，并逐步深入关键知识点。

📚 Webpack 是什么？

Webpack 是一个静态模块打包工具（module bundler），它可以将项目中的各种资源（JS、CSS、图片、字体等）视为模块，通过依赖关系进行打包，最终输出优化后的静态资源。

核心概念

概念说明
Entry入口文件，指示 Webpack 从哪个文件开始构建依赖图
Output输出配置，定义打包后文件的名称和路径
Loader处理非 JS 文件（如 .css、.ts、.vue 等）
Plugin扩展功能，执行更广泛的任务（如压缩、HTML 注入、清理目录等）
Mode模式：development / production / none，影响默认优化行为

✅ 第一步：初始化项目

mkdir webpack-demo
cd webpack-demo
npm init -y

✅ 第二步：安装 Webpack

npm install --save-dev webpack webpack-cli
  • webpack: 核心打包引擎
  • webpack-cli: 提供命令行工具（如 npx webpack）

✅ 第三步：创建基本结构

webpack-demo/
├── src/
│   └── index.js
├── dist/
│   └── index.html
├── webpack.config.js
└── package.json

创建 src/index.js

console.log('Hello Webpack!');

创建 dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Webpack Demo</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

✅ 第四步：配置 webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development', // 可选：'production' 或 'none'
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // 每次构建前清空 dist 目录（v5+）
  },
};

✅ 第五步：添加 npm 脚本

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

运行打包：

npm run build

你会在 dist/main.js 中看到打包结果。

✅ 第六步：使用 Loader（处理 CSS）

安装 CSS loader：

npm install --save-dev css-loader style-loader

更新 webpack.config.js

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

添加 src/style.css

body {
  background: lightblue;
}

引入 CSS

import './style.css';
console.log('Hello Webpack!');

再次运行 npm run build，打开 dist/index.html 查看效果。

✅ 第七步：使用 Plugin（生成 HTML）

安装 html-webpack-plugin：

npm install --save-dev html-webpack-plugin

配置插件

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: 'dist/index.html', // 使用模板
    }),
  ],
};

现在它会自动生成 dist/index.html 并自动注入 <script> 标签。

✅ 第八步：开发服务器（Dev Server）

安装：

npm install --save-dev webpack-dev-server

配置 devServer

module.exports = {
  devServer: {
    static: './dist',
    port: 3000,
    open: true,
  },
};

启动开发服务器：

npm run dev

支持热更新、实时刷新。

✅ 第九步：处理图片等资源（Asset Modules）

Webpack 5 内置支持资源模块，无需额外 loader。

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource', // 自动处理图片，输出到 dist
      },
    ],
  },
};

在 JS 中导入图片：

import imgSrc from './assets/logo.png';

const img = document.createElement('img');
img.src = imgSrc;
document.body.appendChild(img);

✅ 第十步：代码分割（Code Splitting）

方式一：入口起点（Entry Points）

module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js',
  },
};

方式二：动态导入（推荐）

// 懒加载
button.onclick = () => {
  import('./module.js').then(module => {
    module.default();
  });
};

Webpack 会自动拆分 chunk。

方式三：SplitChunksPlugin（提取公共代码）

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

自动提取第三方库（如 lodash、react 等）为独立 bundle。

✅ 第十一步：环境区分配置

通常我们会创建多个配置文件：

  • webpack.common.js —— 公共配置
  • webpack.dev.js —— 开发环境
  • webpack.prod.js —— 生产环境

使用 webpack-merge 合并配置：

npm install --save-dev webpack-merge

示例：webpack.common.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ title: 'Production' }),
  ],
  module: {
    rules: [
      {
        test: /.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

webpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = merge(common, {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin()],
  },
});

package.json 脚本

"scripts": {
  "build": "webpack --config webpack.prod.js",
  "dev": "webpack serve --config webpack.dev.js"
}

✅ 第十二步：Babel 支持（转换 ES6+）

npm install --save-dev babel-loader @babel/core @babel/preset-env

module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

支持箭头函数、async/await 等现代语法。

✅ 第十三步：常用 Plugin 回顾

插件作用
HtmlWebpackPlugin自动生成 HTML
CleanWebpackPlugin清理 dist 目录
CopyWebpackPlugin复制静态资源
MiniCssExtractPlugin抽离 CSS 到单独文件
DefinePlugin定义全局常量（如 process.env.NODE_ENV）
CompressionPlugin生成 gzip 压缩文件

✅ 第十四步：性能优化建议

  1. 使用 mode: 'production'
  2. 启用 splitChunks
  3. 使用 source-map 控制调试信息（开发用 eval-source-map，生产用 source-map）
  4. 图片压缩、Tree Shaking（默认开启）
  5. 缓存：output.filename = '[name].[contenthash].js'
output: {
  filename: '[name].[contenthash].js',
  path: path.resolve(__dirname, 'dist'),
}

✅ 总结：Webpack 核心流程

  1. 从 Entry 开始分析依赖
  2. 通过 Loaders 转换非 JS 模块
  3. 生成 Chunk 和 Asset
  4. 通过 Plugins 增强构建过程
  5. 输出到 Output 目录

🔚 复习检查清单 ✅

项目是否掌握
初始化项目 & 安装 Webpack☐
配置 entry/output/mode☐
使用 loader 处理 CSS、图片☐
使用 plugin 自动生成 HTML☐
启动 dev server 实现热更新☐
实现代码分割（动态导入）☐
区分开发与生产环境配置☐
使用 Babel 转译 JS☐
输出带 hash 的文件名☐
了解 Tree Shaking 原理☐

📚 推荐学习资料

如果你正在准备面试或项目重构，这份复习笔记可以帮助你快速回顾 Webpack 的全貌。需要我帮你生成一个完整的最小可运行示例仓库结构吗？欢迎继续提问！

avatar
文章
阅读
粉丝