Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当运行在一个现代 JavaScript 环境中时，Webpack 会把你的应用程序打包成一个或多个 bundle。

快速开始

  1. 安装 Webpack: 你可以通过 npm 或 yarn 来安装 Webpack。

    npm install --save-dev webpack webpack-cli

    或者

    yarn add --dev webpack webpack-cli

  2. 配置文件: Webpack 需要一个配置文件 webpack.config.js 来指示它如何处理应用程序。

    const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

  3. 运行 Webpack: 在命令行中运行 webpack 命令来启动打包过程。

特性

  • 模块化: Webpack 能够将多个文件打包成一个 bundle，同时还能将它们分割成多个模块。

  • 代码分割: 可以通过动态导入（dynamic imports）来实现代码分割，按需加载模块。

  • 加载器（Loaders）: 可以使用加载器（loaders）来转换各种类型的模块，如 CSS、图片、JSON 等。

  • 插件（Plugins）: 插件可以用于执行各种任务，如压缩、清除缓存、添加注释等。

示例

// 示例：动态导入
import('./module').then((module) => {
  console.log(module.content);
});

Webpack 架构

更多关于 Webpack 的信息，请访问我们的Webpack 教程页面。

Webpack 是一个强大的工具，可以帮助你更好地组织和管理 JavaScript 应用程序。通过了解其基本概念和配置，你可以开始构建更高效、可维护的应用程序。