Webpack 配置全面解析

Webpack 的配置文件通常使用 webpack.config.js 来定义，它是一个 Node.js 模块，可以导出一个对象。这个对象的属性决定了 Webpack 如何处理和打包你的文件。以下是 Webpack 配置文件的主要选项及其详细解释。https://www.nowcoder.com/issue/tutorial?zhuanlanId=j572L2&uuid=34f94c51e98c43189698d5dbb201f92c

1. entry（入口）
entry 属性指定了 Webpack 的入口文件。它是应用程序的起点，Webpack 会根据该文件构建依赖图。

entry: './src/index.js' // 单入口
也可以使用多个入口：

entry: {
    app: './src/index.js',
    admin: './src/admin.js'
}
2. output（输出）
output 属性定义了 Webpack 如何输出最终的资源（打包后的文件）。它通常包含以下字段：

output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist'), // 输出目录（必须是绝对路径）
    publicPath: '/', // 提供给 HTML 文件的公共 URL 地址
}
3. mode（模式）
mode 属性用于定义构建模式，可以是 development、production 或 none。模式影响 Webpack 的内置优化配置。

mode: 'development' // 开发模式，增加调试信息
// 或
mode: 'production' // 生产模式，启用压缩和优化
4. module（模块）
module 属性是配置加载器的地方，用于处理不同类型的文件。加载器是一个函数，它使用特定的规则（rules）去转换文件。