Webpack 的 Entry、Output、Loader、Plugin、Mode 分别是什么？

推荐答案

• Entry: 指定 Webpack 打包的入口文件，Webpack 会从这个文件开始构建依赖图。
• Output: 指定 Webpack 打包后的文件输出路径和文件名。
• Loader: 用于处理非 JavaScript 文件，将其转换为 Webpack 能够处理的模块。
• Plugin: 用于执行更广泛的任务，如打包优化、资源管理、环境变量注入等。
• Mode: 指定 Webpack 的构建模式，可以是 development、production 或 none，不同模式会启用不同的优化策略。

本题详细解读

Entry

Entry 是 Webpack 打包的起点，Webpack 会从这个文件开始，递归地构建依赖图。Entry 可以是一个字符串、数组或对象。如果是对象，可以配置多个入口文件，适合多页面应用。

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

Output

Output 配置 Webpack 打包后的文件输出路径和文件名。通常需要指定 path 和 filename 两个属性。

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

Loader

Loader 用于处理非 JavaScript 文件，如 CSS、图片、字体等。Loader 将这些文件转换为 Webpack 能够处理的模块。常见的 Loader 有 babel-loader、css-loader、file-loader 等。

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

Plugin

Plugin 用于执行更广泛的任务，如打包优化、资源管理、环境变量注入等。Plugin 可以在 Webpack 的整个生命周期中插入自定义行为。常见的 Plugin 有 HtmlWebpackPlugin、MiniCssExtractPlugin、CleanWebpackPlugin 等。

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

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

Mode

Mode 指定 Webpack 的构建模式，可以是 development、production 或 none。不同模式会启用不同的优化策略。development 模式会启用开发工具，如 source map，而 production 模式会启用代码压缩等优化。

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