1. 程式人生 > >webpack-配置

webpack-配置

concept out 定義 dirname module 分配 相同 例子 註意

配置(Configuration)

你可能已經註意到,很少有 webpack 配置看起來很完全相同。

這是因為 webpack 的配置文件,是導出一個對象的 JavaScript 文件。

此對象,由 webpack 根據對象定義的屬性進行解析。

因為 webpack 配置是標準的 Node.js CommonJS 模塊,你可以做到以下事情:

  • 通過 require(...) 導入其他文件
  • 通過 require(...) 使用 npm 的工具函數
  • 使用 JavaScript 控制流表達式,例如 ?: 操作符
  • 對常用值使用常量或變量
  • 編寫並執行函數來生成部分配置

請在合適的時機使用這些特性。

雖然技術上可行,但應避免以下做法:

  • 在使用 webpack 命令行接口(CLI)(應該編寫自己的命令行接口(CLI),或使用 --env)時,訪問命令行接口(CLI)參數
  • 導出不確定的值(調用 webpack 兩次應該產生同樣的輸出文件)
  • 編寫很長的配置(應該將配置拆分為多個文件)
你需要從這份文檔中收獲最大的點,就是你的 webpack 配置,可以有很多種的格式和風格。但為了你和你的團隊能夠易於理解和維護,你們要始終采取同一種用法、格式和風格。

接下來的例子展示了 webpack 配置對象(webpack configuration object)如何即具有表現力,又具有可配置性,這是因為配置對象即是代碼

最簡單的配置

webpack.config.js

var path = require(‘path‘);

module.exports = {
  entry: ./foo.js,
  output: {
    path: path.resolve(__dirname, dist),
    filename: foo.bundle.js
  }
};

多個 Target

查看:導出多個配置

使用其他配置語言

webpack 接受以多種編程和數據語言編寫的配置文件。

webpack-配置