前端技术文档

Appearance

Webpack ​

简介 ​

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，然后生成一个或多个 bundle。

核心概念 ​

入口(Entry) ​

入口起点指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。

javascript
module.exports = {
  entry: './path/to/my/entry/file.js'
};

输出(Output) ​

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

javascript
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

加载器(Loaders) ​

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

javascript
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

插件(Plugins) ​

插件可以用于执行范围更广的任务，包括：打包优化、资源管理和注入环境变量。

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

模式(Mode) ​

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置的优化。

javascript
module.exports = {
  mode: 'production'
};

常用配置示例 ​

基础配置 ​

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

性能优化技巧 ​

  1. 代码分割：使用 SplitChunksPlugin 分离公共依赖
  2. Tree Shaking：移除未引用代码
  3. 懒加载：按需加载模块
  4. 缓存：使用 contenthash 进行长效缓存
  5. 压缩：使用 TerserPlugin 压缩 JavaScript

常见问题与解决方案 ​

构建速度慢 ​

  • 使用 cache-loader 缓存编译结果
  • 配置 include/exclude 减少处理文件
  • 使用 thread-loader 多线程构建

打包体积大 ​

  • 分析包大小：使用 webpack-bundle-analyzer
  • 优化依赖：使用 purgecss-webpack-plugin 清除未使用的 CSS
  • 动态导入：使用 import() 语法

与其他打包工具对比 ​

特性WebpackRollupVite
适用场景大型应用库和框架现代Web应用
开发体验配置复杂简单直观极速开发
生态系统丰富中等快速成长
构建速度较慢较快非常快

学习资源 ​