Webpack 简介

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当运行 webpack 时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

特点

模块化：Webpack 能够将代码分割成多个模块，每个模块可以独立加载和更新。
懒加载：Webpack 支持代码的懒加载，可以按需加载模块，提高页面加载速度。
插件系统：Webpack 提供了一个强大的插件系统，可以扩展其功能。
支持多种模块类型：Webpack 支持多种模块类型，如 JavaScript、CSS、图片等。

使用场景

前端应用开发：Webpack 常用于构建大型前端应用，如单页应用（SPA）。
组件库构建：Webpack 可以用于构建前端组件库，如 React、Vue 等框架的组件库。
Node.js 应用：Webpack 也可以用于构建 Node.js 应用。

示例

以下是一个简单的 Webpack 配置示例：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

扩展阅读

更多关于 Webpack 的信息，请访问 Webpack 官方文档。