[譯]webpack API之配置（上）

時間 2020-01-31

標籤 webpack api 配置简体版

原文原文鏈接

webpack中的配置對象（configuration object），根據你使用webpack的不一樣有兩種方式傳入這個對象：node

CLI

若是你使用了CLI ，將會讀取webpack.config.js文件（或是由 --config 選項傳入的文件）。該文件以一下形式暴露配置對象（configuration object）：webpack

module.exports = {
    // configuration
};

node.js API

若是你使用node.js API，那麼你將須要把配置對象（configuration object做爲參數傳入：git

webpack({
    // configuration
}, callback);

多個配置

你也傳入一個由多個配置對象組成的數組，彼此之間是平行執行的。他們共享文件系統的緩存與監聽。所以這將比屢次調用webpack來的更有效率。github

配置對象的內容

小貼士：在配置中你並不須要使用純的JSON 。使用任何你想用的JavaScript 格式。由於配置文件是一個node.js模塊。web

一個超簡單的配置對象例子：json

{
    context: __dirname + "/app",
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    }
}

context參數：

用於決定entry參數的基本目錄（絕對路徑）。若是設置了output.pathinfo，包括其在內都會被設置爲這個目錄。跨域

Default: process.cwd()數組

entry參數

打包的入口位置。瀏覽器

若是傳入一個字符串：這個字符串將決定啓動時被加載的那個模塊。

若是傳入一個數組：全部的模塊在啓動時都將被加載。並把最後一個做爲出口。

entry: ["./entry1", "./entry2"]

若是傳入一個對象：將會建立多個entry束（bundle）。key就是區塊的名字，value能夠時字符串或是數組。

{
    entry: {
        page1: "./page1",
        page2: ["./entry1", "./entry2"]
    },
    output: {
        // 當你有多個入口文件時，請確保在output.filename中使用 [name]或[id] 
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    }
}

output參數

該選項將影響編譯的結果。output將控制Webpack將編譯後的文件寫入磁盤的過程。請注意，即使能夠存在多個入口點，但也僅須要規定一個output 便可。

當你使用哈希（[hash] 或 [chunkhash]）時，請確保你模塊的有固定的順序。可以使用OccurenceOrderPlugin或recordsPath。

output.filename

該參數指定了磁盤中每個輸出文件的名字。不能在此指定絕對路徑！output.path選項將決定文件被寫入磁盤的位置，filename被用來單獨處理每一個文件的命名。（譯註：這裏其實強調了解耦）

單入口：

{
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: './built'
  }
}

// 寫入磁盤路徑： ./built/bundle.js

多入口

若是你的配置項會建立不知一個「chunk」（例如使用多個入口文件或使用像CommonsChunkPlugin這樣的插件），你將會用到如下置換以確保每一個文件不重名。

[name] 將被替換成chunk的名字。
[hash] 將被替換成編譯時的hash。

[chunkhash] 將被替換爲chunk的hash。

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

// 寫入磁盤路徑： ./built/app.js, ./built/search.js

output.path

該選項設置了output目錄，而且要是一個絕對路徑。

[hash] 將被替換成編譯時的hash。

output.publicPath

該選項定義了在瀏覽器中引用時輸出文件使用的公共url地址。對於內嵌的<script> 或 <link>標籤亦或圖片資源的引用，publicPath被用來以href 或 url()指向文件，當它不一樣於它們在磁盤上的位置（由路徑指定）。當你想要把一些或所有文件部署在不一樣域或CND上時，publicPath將變得頗有幫助。Webpack Dev Server也經過publicPath來肯定服務器的文件引用。與上文的path同樣，你可使用[hash]置換來獲得更好的緩存配置。

config.js

output: {
    path: "/home/proj/public/assets",
    publicPath: "/assets/"
}

index.html

<head>
  <link href="/assets/spinner.gif"/>
</head>

一個更復雜的例子來講明對資源使用CDN和哈希。

config.js

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

注意：在本例中，編譯時並不知曉最終輸出文件的publicPath，在入口文件中，其被留做空白，並在運行時動態設置。若是在編譯時不清楚publicPath，你能夠忽略它或是在入口文件中設置webpack_public_path 。

__webpack_public_path__ = myRuntimePublicPath

// 應用入口的其他部分

output.chunkFilename

做爲output.path目錄中相關路徑的無入口塊的文件名。

[id] 將被替換成chunk的id。
[name] 將被替換成chunk的名字（當區塊沒有名字時用id表示）。
[hash] 將被替換成編譯時的哈希。
[chunkhash] 將被替換成chunk的哈希。

output.sourceMapFilename

js文件的SourceMaps文件名。他們存在於output.path目錄中。

[file] 將被替換js文件的文件名。
[id] 將被替換成chunk的id。
[hash] 將被替換成編譯時的哈希。

Default: "[file].map"

output.devtoolModuleFilenameTemplate

在生成SourceMap時的函數的文件名模版字符串。

[resource] 將被替換成webpack解析文件的路徑，包括最右邊loader的查詢參數（若是存在）。
[resource-path] 至關於缺乏數據查詢loader的 [resource] 。
[loaders] 是loaders 的目錄，也是最右邊loader的參數名（只顯示loaders）is the list of loaders and params up to the name of the rightmost loader (only explict loaders).
[all-loaders] 是loaders 的目錄，也是最右邊loader的參數名（包含自動化的loader）
[id] 將被替換成模塊的id。
[hash] 將被替換成模塊識別碼的哈希。
[absolute-resource-path] 將被替換成絕對的文件名。

Default (devtool=[inline-]source-map): "webpack:///[resource-path]"
Default (devtool=eval): "webpack:///[resource-path]?[loaders]"
Default (devtool=eval-source-map): "webpack:///[resource-path]?[hash]"

也能夠定義爲函數而不是字符串模板。函數接受包含以下屬性的對象做爲參數。

identifier
shortIdentifier
resource
resourcePath
absoluteResourcePath
allLoaders
query
moduleId
hash

output.devtoolFallbackModuleFilenameTemplate

與output.devtoolModuleFilenameTemplate類似，但用於處理複製的模版標識符。

Default: "webpack:///[resourcePath]?[hash]"

output.hotUpdateChunkFilename

熱更新塊的文件名。存在於output.path目錄中。

[id] 將被替換爲塊的id。
[hash] 將被替換爲編譯時的哈希（在記錄中存在的最後一個哈希）。

Default: "[id].[hash].hot-update.js"

output.hotUpdateMainFilename

熱加載主文件的文件名。存在於output.path目錄中。

[hash] 將被替換爲編譯時的哈希（在記錄中存在的最後一個哈希）。

Default: "[hash].hot-update.json"

output.jsonpFunction

被用於webpack異步加載塊的JSONP函數。

一個更短的函數將從必定意義上減少文件大小。當單頁中有多個webpack實例時，使用不一樣的標識符。

Default: "webpackJsonp"

output.hotUpdateFunction

被用於webpack異步加載熱更新塊的JSONP函數。

Default: "webpackHotUpdate"

output.pathinfo

包含模塊的評論信息。

require(/* ./test */23)

在生產環境中不要使用。

Default: false

output.library

若你設置了該選項，則導出文件是一個庫，庫名爲output.library所設。
若是你的目的是寫一個庫而且想要將其發佈爲一個單一的文件，就是用它。

output.libraryTarget

導出庫的格式：

"var" - 經過設置變量導出：

var Library = xxx (default)

"this" - 經過設置this屬性導出：

this["Library"] = xxx

"commonjs" - 經過設置export屬性導出：

exports: exports["Library"] = xxx

"commonjs2" - 經過設置module.exports 導出：

module.exports = xxx

"amd" - 經過AMD（可選：經過library選項設置）導出

"umd" - 經過AMD，CommonJS2或在根中的屬性導出。

Default: "var"

若是沒有設置output.library，而且output.libraryTarget沒有經過var設置值。暴露出的對象的每一個屬性都會被拷貝（除了amd, commonjs2 和 umd）。

output.umdNamedDefine

若是在output.libraryTarget被設置成umd形式，而且output.library也被設置時，將該選項設爲true將會給命名給amd模塊

output.sourcePrefix

每行包文件的資源的前綴都是字符串。

Default: "\t"

output.crossOriginLoading

該選項跨域加載塊。

有以下可能的值：

false - 靜止跨域加載。

"anonymous" - 容許跨域加載。沒有證書將會在請求時被髮送。

"use-credentials" - 容許跨域加載。證書將會在請求時被髮送。

能夠在MDN上查看更多關於跨域的信息。

Default: false

譯註：因爲篇幅有限，把文檔拆成兩篇，下篇隨後奉上。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。