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

Webpack 有两个核心概念：

  • 入口（Entry）：指示 webpack 应该使用哪个模块作为项目的入口点。
  • 输出（Output）：指示 webpack 将打包后的文件输出到哪里。

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

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

Webpack 不仅限于 JavaScript，它还可以用于打包 CSS、图片和其他资源。

使用 Webpack 的优势

  • 模块化：将代码拆分成多个模块，便于管理和维护。
  • 代码分割：按需加载模块，提高页面加载速度。
  • 懒加载：动态导入模块，进一步优化加载速度。
  • 插件系统：通过插件扩展 Webpack 功能。

了解更多关于 Webpack 的信息

图片展示

Webpack 的核心概念可以通过以下图片进行理解：

Webpack Concept