详解webpack的配置文件entry与output

让我详细讲解“详解webpack的配置文件entry与output”的完整攻略。

概述

Webpack 是一个静态模块打包器，可以将多个模块转换为浏览器可识别的 JavaScript、CSS、图片等文件。entry 和 output 是 Webpack 配置文件中的两个重要选项，entry 用于指定 Webpack 并列入打包的入口模块，output 用于指定 Webpack 打包后的输出路径和文件名。

entry

entry 是指定 Webpack 打包入口文件的选项，可以设置为字符串、数组或对象。

• 字符串：

如果 entry 的值是字符串类型，Webpack 将把这个字符串作为单个入口文件的路径（默认为 "./src/index.js"）。

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

• 数组：

如果 entry 的值是数组类型，Webpack 将把数组内的多个文件打包到一起成为一个文件。

module.exports = {
  entry: ['./src/index.js', './src/login.js'],
  // ...
};

• 对象：

如果 entry 是对象类型，Webpack 将从多个入口文件开始构建依赖关系图。

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

上述配置中的 entry 对象，包含两个属性：main 和 login。其中，main 和 login 分别对应 src 文件夹下的 index.js 和 login.js 两个入口文件，可以通过打包生成两个 JS 文件。

output

output 是配置 Webpack 打包生成文件的选项，可以设置为字符串或对象。

• 字符串：

如果 output 的值是字符串类型，Webpack 将把输出文件存储在指定的目录下，文件名为指定的字符串。

module.exports = {
  // ...
  output: {
    filename: 'main.js',
    path: __dirname + '/dist'
  }
};

• 对象：

如果 output 是对象类型，可以指定多个输出文件。

module.exports = {
  // ...
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

在上述代码中，filename 的值是 [name].js ，那么 Webpack 会为每个入口文件生成一个输出文件，输出文件的名称即为 entry 对象中指定的 key 值。例如，使用上文的 entry 对象，Webpack 将生成 main.js 和 login.js 两个文件，分别对应入口文件 index.js 和 login.js。

另外，使用 output.path 指定输出文件存放的路径，output.publicPath 则指定所有打包生成的文件路径（可以使用相对或绝对路径）。

示例

下面是一个完整的 Webpack 配置文件，包含 entry 和 output 配置项。

module.exports = {
  entry: {
    main: './src/index.js',
    login: './src/login.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

该配置文件将 src 文件夹下的 index.js 和 login.js 两个入口文件打包成 main.js 和 login.js 两个输出文件，分别存放在 dist 文件夹下。

另外一个示例，下面是一个使用数组的配置，加深对 entry 的理解：

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

该配置文件将 src 文件夹下的 index.js 和 login.js 两个入口文件打包成 bundle.js 一个输出文件，存放在 dist 文件夹下。其中，Webpack 会将两个入口文件打包到一块，在浏览器中执行 bundle.js 文件中的内容。