简体中文

构建产物目录

本章节主要介绍构建产物的目录结构，以及如何控制不同类型产物的输出目录。

默认产物目录

下面是最基础的产物目录结构，默认情况下，构建产物会生成在当前项目的 dist 目录下。

dist
├── css
│   ├── [name].[hash].css
│   └── [name].[hash].css.map
│
├── js
│   ├── [name].[hash].js
│   └── [name].[hash].js.map
│
└── [name].html

最常见的产物是 HTML 文件、JS 文件和 CSS 文件：

HTML 文件：默认输出到 dist 目录的根部。
JS 文件：默认输出到 static/js 目录，
CSS 文件：默认输出到 static/css 目录。

此外，JS 文件和 CSS 文件有时候会生成一些相关产物：

Source Map 文件：包含保存源代码映射关系，默认输出到 JS 文件和 CSS 文件的同级目录，并添加 .map 后缀。在产物的文件名称中，[name] 表示这个文件对应的入口名称，比如 index, main。[hash] 则是基于该文件的内容生成的哈希值。

修改产物目录

通过 output.filename 来修改产物的文件名。

静态资源

当你在代码中引用图片、SVG、字体、媒体等类型的静态资源时，EMP会将其统一输出到 dist/assets 目录下：

dist
└── assets
    ├── foo.[hash].png
    ├── bar.[hash].svg
    ├── baz.[hash].woff2
    └── qux.[hash].mp4

目录