webpack配置之---入口

entry

单入口

由于一般的单页面项目只有一个入口，也就是单入口，单入口的配置方式有以下三种方式，如果有遗漏的欢迎补充

1、字符串方式

以下这几行代码解释：

entry：本项目的入口文件

output：本项目打包后的输出文件

module.exports = {
  entry: './src/index.js',  // 入口文件
  output: {
    filename: 'bundle.js',  // 打包后的文件名
    path: path.resolve(__dirname, 'dist'),
  },
};

2、数组方式

以下这几行代码解释：

entry：本项目的入口是单入口即app，但是该入口app依赖俩文件

module.exports = {
  entry: {
    app: ['./src/app.js', './src/appHelper.js'],  // 入口为多个文件
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

3、对象方式

entry: {
  app: {
    import: ['./src/app.js', './src/appHelper.js'],  // 使用 import 数组指定多个文件
    dependOn: 'vendor',  // 可以指定依赖其他入口（如果有的话）
  },
  vendor: ['./src/vendor.js'],  // 假设这里有一个单独的 vendor 入口
},

多入口

当多个入口时，每个入口的配置方式有以下三种，如果有遗漏的欢迎补充

1、字符串

其中键表示入口的名称，值表示对应的入口文件路径。每个入口都会生成一个对应的打包文件。

在这个配置中，entry 是一个对象，app 和 vendor 是两个不同的入口文件。Webpack 会分别为这两个入口生成 app.bundle.js 和 vendor.bundle.js。

module.exports = {
  entry: {
    app: './src/app.js',         // 第一个入口
    vendor: './src/vendor.js',   // 第二个入口
  },
  output: {
    filename: '[name].bundle.js',  // 使用 [name] 占位符来动态生成文件名
    path: path.resolve(__dirname, 'dist'),
  },
};

2、数组

每个入口可以配置为一个包含多个文件路径的数组。Webpack 会将所有文件打包在一起，按顺序构建依赖图。

module.exports = {
  entry: {
    app: ['./src/app.js', './src/appHelper.js'],  // 入口为多个文件
    vendor: ['./src/vendor.js', './src/vendorHelper.js'],
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这种方式下，app 入口由两个文件 app.js 和 appHelper.js 组成，Webpack 会处理这些文件的依赖关系并打包成 app.bundle.js。

3、对象(带有优化功能)

当项目中有多个入口，并且某些代码是共享的，你可以使用 dependOn 来指定共享的模块。这有助于进行代码拆分，优化打包结果。

module.exports = {
  entry: {
    app: {
      import: './src/app.js',
      dependOn: 'common',  // 共享的模块
    },
    vendor: {
      import: './src/vendor.js',
      dependOn: 'common',  // 共享的模块
    },
    common: './src/common.js',  // 公共模块
  },
  output: {
    filename: '[name].[contenthash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',  // 启用代码拆分
    },
  },
};

在这个例子中，app 和 vendor 都依赖于 common 模块。Webpack 会将 common 模块提取出来作为一个独立的 chunk，从而避免冗余的代码。

总结：

• 单入口配置：适用于只有一个入口文件的简单项目。配置方式为一个字符串路径。
• 多入口配置：适用于需要多个入口文件的项目，可以使用对象或数组方式配置。
  • 对象方式：每个入口配置为对象的属性，键为入口名称，值为文件路径。
  • 数组方式：每个入口配置为数组，多个文件按顺序打包。
• 动态入口：可以根据环境变量或其他条件动态选择入口文件。
• 多个页面入口：多个页面的多入口配置，使得每个页面生成独立的 JavaScript 文件。
• 代码拆分：通过 import 和 dependOn 配置共享模块，进行代码拆分，优化打包结果。