Webpack 的核心概念有哪些？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

Entry（入口）

Entry 是 Webpack 构建依赖图的起点。Webpack 会从 Entry 指定的文件开始，递归地解析出所有依赖的模块。一个项目可以有一个或多个入口点。

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

Output（输出）

Output 配置项告诉 Webpack 在哪里输出它所创建的打包文件，以及如何命名这些文件。通常，输出文件会放在 dist 目录下。

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

Loader（加载器）

Loader 用于处理非 JavaScript 文件。Webpack 本身只能处理 JavaScript 文件，但通过 Loader，Webpack 可以处理其他类型的文件，如 CSS、图片等。

// www.javascriptcn.com code example
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Plugin（插件）

Plugin 用于执行更广泛的任务，如打包优化、资源管理和环境变量注入等。与 Loader 不同，Plugin 可以作用于整个构建过程。

// www.javascriptcn.com code example
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

Mode（模式）

Mode 配置项用于指定 Webpack 的构建模式。Webpack 会根据不同的模式启用不同的优化策略。常见的模式有 development 和 production。

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

Module（模块）

在 Webpack 中，模块可以是任何文件，如 JavaScript、CSS、图片等。Webpack 通过 Loader 将这些模块转换为可处理的格式。

Chunk（代码块）

Chunk 是 Webpack 将多个模块打包成一个或多个代码块的结果。代码块可以用于优化加载性能，例如通过代码分割（Code Splitting）来实现按需加载。

Bundle（打包文件）

Bundle 是 Webpack 最终生成的打包文件，通常是一个或多个 JavaScript 文件。这些文件包含了所有模块的代码，并且已经过优化处理。

Webpack 的核心概念有哪些？

推荐答案