输出（Output）

webpackjsorg-main核心概念

title: 输出（Output）
sort: 2
contributors:

TheLarkInn
chyipin
rouzbeh84
byzyk
EugeneHlushko

配置 output 选项可以告诉 webpack 如何将编译后的文件写入磁盘。注意，虽然可以有多个 entry 入口点，但只能指定一个 output 配置。

用法

在 webpack 配置中，output 属性的最小要求是将其值设置为一个对象，并提供用于输出文件的 output.filename：

webpack.config.js

js 复制代码

export default {
  output: {
    filename: "bundle.js",
  },
};

此配置会将单个 bundle.js 文件输出到 dist 目录。

多个入口点

如果你的配置创建了多个“chunk”（例如使用多个入口点或使用 CommonsChunkPlugin 等插件），则应使用替换来确保每个文件都有唯一的名称。

js 复制代码

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: {
    app: "./src/app.js",
    search: "./src/search.js",
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "./dist"),
  },
};

// 写入磁盘：./dist/app.js, ./dist/search.js

进阶用法

下面是一个使用 CDN 和资源哈希的复杂示例：

config.js

js 复制代码

export default {
  // ...
  output: {
    path: "/home/proj/cdn/assets/[fullhash]",
    publicPath: "https://cdn.example.com/assets/[fullhash]/",
  },
};

如果编译时最终 publicPath 尚不可知，可以将其留空，并在入口点文件中通过 __webpack_public_path__ 变量在运行时动态设置：

js 复制代码

__webpack_public_path__ = myRuntimePublicPath;

// 其余应用入口代码

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。