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配置共享模块，进行代码拆分，优化打包结果。