webpack-配置
阿新 • • 發佈:2018-02-26
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-配置