什么是webpack?

Webpack 是一个 前端模块打包工具（module bundler），主要作用是把项目中的各种资源（JavaScript、CSS、图片等）当作模块进行处理，然后打包成浏览器可以直接运行的文件。

它解决的核心问题是：现代前端项目模块化开发 和 资源依赖管理。

Webpack 的核心作用

打包模块

把多个 JS 文件、CSS、图片等资源打包成一个或多个 bundle 文件，减少 HTTP 请求。

模块化支持

支持 ES Module（ES6 import/export）、CommonJS、AMD 等模块化语法。

资源处理

通过 Loader 可以处理非 JS 文件（CSS、Sass、图片、字体等）。

代码优化

压缩代码、Tree Shaking（去掉没用的代码）、代码分割（Code Splitting）。

开发体验

内置开发服务器（webpack-dev-server）、热更新（HMR）等。

Webpack 的四个核心概念

Entry（入口）

指定打包的起点（默认是 src/index.js）

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

Output（输出）

指定打包后的文件输出路径和文件名。

output: {
  filename: 'bundle.js',
  path: __dirname + '/dist'
}

Loader（加载器）

让 Webpack 能够处理除了 JS 以外的文件，比如：

• css-loader + style-loader 处理 CSS

• babel-loader 处理 ES6+ 转 ES5

• file-loader / url-loader 处理图片

Plugin（插件）

用于扩展 Webpack 功能，比如：

• HtmlWebpackPlugin 自动生成 HTML

• CleanWebpackPlugin 清理 dist 目录

• DefinePlugin 定义全局变量

Webpack 工作流程

• 读取配置（webpack.config.js）

• 根据 entry 找到依赖模块

• 使用 Loader 转换文件

• 打包输出成 bundle 文件

一个最基本的 Webpack 配置示例

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist') // 输出目录
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配 CSS 文件
        use: ['style-loader', 'css-loader'] // Loader 顺序：从右到左
      }
    ]
  },
  plugins: []
};