Webpack 的核心概念是什么？请解释 Entry、Output、Loader、Plugin 的作用。

推荐答案

Webpack 的核心概念包括 Entry、Output、Loader 和 Plugin。它们各自的作用如下：

• Entry：指定 Webpack 打包的入口文件，Webpack 会从该文件开始构建依赖图。
• Output：指定 Webpack 打包后的文件输出路径和文件名。
• Loader：用于处理非 JavaScript 文件（如 CSS、图片等），将其转换为 Webpack 能够处理的模块。
• Plugin：用于执行更广泛的任务，如打包优化、资源管理、环境变量注入等。

本题详细解读

Entry

Entry 是 Webpack 构建依赖图的起点。Webpack 会从 Entry 指定的文件开始，递归地解析出所有依赖的模块。Entry 可以是一个字符串（单入口）或一个对象（多入口）。

module.exports = {
  entry: './src/index.js', // 单入口
  // 或者
  entry: {
    app: './src/app.js',
    admin: './src/admin.js'
  } // 多入口
};

Output

Output 配置决定了 Webpack 打包后的文件输出位置和文件名。通常，Output 会指定一个 path 和一个 filename。

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

Loader

Loader 用于处理非 JavaScript 文件。Webpack 本身只能处理 JavaScript 文件，但通过 Loader，Webpack 可以处理其他类型的文件，如 CSS、图片、字体等。Loader 通常配置在 module.rules 中。

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

Plugin

Plugin 用于执行更广泛的任务，如打包优化、资源管理、环境变量注入等。Plugin 可以在 Webpack 的构建过程中插入自定义的逻辑。常见的 Plugin 有 HtmlWebpackPlugin、CleanWebpackPlugin 等。

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

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