webpack的出口(output)

出口(output)

output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這些檔案，預設值為 ./dist。基本上，整個應用程式結構，都會被編譯到你指定的輸出路徑的檔案夾中。

配置 output 選項可以控制 webpack 如何向硬碟寫入編譯檔案。注意，即使可以存在多個入口起點，但隻指定一個輸出配置。

用法(Usage)

在 webpack 中配置 output 屬性的最低要求是，将它的值設定為一個對象，包括以下兩點：

1.filename 用于輸出檔案的檔案名。

2.目标輸出目錄 path 的絕對路徑。

webpack.config.js

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;           

複制

此配置将一個單獨的 bundle.js 檔案輸出到 /home/proj/public/assets 目錄中。

多個入口起點

如果配置建立了多個單獨的 “chunk”（例如，使用多個入口起點或使用像 CommonsChunkPlugin 這樣的插件），則應該使用占位符(substitutions)來確定每個檔案具有唯一的名稱。

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

// 寫入到硬碟：./dist/app.js, ./dist/search.js           

複制

進階進階

以下是使用 CDN 和資源 hash 的複雜示例：

config.js

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}           

複制

在編譯時不知道最終輸出檔案的 publicPath 的情況下，publicPath 可以留白，并且在入口起點檔案運作時動态設定。如果你在編譯時不知道 publicPath，你可以先忽略它，并且在入口起點設定 webpack_public_path。

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

// 寫入到硬碟：./dist/app.js, ./dist/search.js           

複制