webpack自定义输出文件名

你可以使用 webpack 的 output.filename 选项来自定义输出文件名。这个选项允许你使用特定的占位符来构建文件名，例如：

module.exports = {
  // ...
  output: {
    filename: '[name].bundle.js', // 使用入口文件的名称作为输出文件名
    path: '/dist'
  }
};

在上面的示例中，[name] 将被替换为入口文件的名称，生成的输出文件将以入口文件的名称命名。你还可以使用其他占位符来自定义文件名，例如 [hash]、[chunkhash] 等，以便生成唯一的文件名。

更多关于 webpack 的输出配置选项和占位符的详细信息，请参阅 webpack 官方文档中的相关部分。

相关问题

webpack打包流程

Webpack的打包流程可以简单概括如下：

1. 解析配置文件：Webpack使用配置文件来指导打包流程，解析配置文件并获取其中的配置信息。

2. 解析入口文件：Webpack根据配置文件中指定的入口文件，从入口文件开始递归解析所有依赖的模块。

3. 加载模块：Webpack根据解析出的依赖关系，逐个加载模块，并根据模块类型和Loader对模块进行转换处理。

4. 构建代码块：Webpack将转换后的模块组合成代码块，根据代码块之间的依赖关系进行组合和排序。

5. 生成输出文件：Webpack根据配置文件中指定的输出路径和文件名，将构建好的代码块生成输出文件。

6. 执行插件：Webpack提供了插件系统，可以在打包流程中的不同阶段执行插件，完成各种自定义的操作。

以上是Webpack的大致打包流程，Webpack的实现细节还有很多，比如缓存机制、热更新等，这些都是为了提高打包效率和开发体验。

webpack工程化概念

Webpack是一个现代化的前端打包工具，可以将多个模块打包成一个或多个静态资源文件（如JavaScript、CSS、HTML等）。Webpack的工程化概念主要包括以下几个方面：

1. 入口（Entry）：指定Webpack打包的入口文件，Webpack会从这个文件开始分析依赖，构建出一个依赖关系图谱。

2. 输出（Output）：指定Webpack打包后输出的文件名、路径等信息。

3. Loader：用于对特定类型的文件进行转换，将其转换为Webpack可识别的模块。

4. 插件（Plugin）：用于完成Webpack在打包过程中各种自定义的功能，例如压缩代码、提取公共代码、生成HTML文件等。

5. 模式（Mode）：指定Webpack的打包模式，有开发模式和生产模式两种，开发模式下不会进行代码压缩等优化，生产模式下则会进行这些优化。

6. DevServer：用于搭建一个本地开发服务器，可以实现热更新、自动刷新等功能。

通过以上的工程化概念，我们可以更加高效地进行前端开发，提高开发效率和代码质量。