输出

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

用法

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

webpack.config.js

module.exports = {
  output: {
    filename: 'bundle.js',
  },
};

此配置将输出一个名为 bundle.js 的文件到 dist 目录。

多个入口点

如果您的配置创建了不止一个“块”(例如使用多个入口点或使用 CommonsChunkPlugin 等插件),您应该使用 替换 来确保每个文件都有一个唯一的名称。

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

// writes to disk: ./dist/app.js, ./dist/search.js

高级

以下是一个使用 CDN 和哈希值处理资产的更复杂示例

config.js

module.exports = {
  //...
  output: {
    path: '/home/proj/cdn/assets/[fullhash]',
    publicPath: 'https://cdn.example.com/assets/[fullhash]/',
  },
};

在输出文件的最终 publicPath 在编译时未知的情况下,可以将其留空,并在运行时通过入口点文件中的 __webpack_public_path__ 变量动态设置。

__webpack_public_path__ = myRuntimePublicPath;

// rest of your application entry

5 位贡献者

TheLarkInnchyipinrouzbeh84byzykEugeneHlushko