Webpack之配置說明的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)Webpack之配置說明的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

CLI

如果你使用CLI ，webpack 會默認(rèn)讀取webpack.config.js（或者通過 --config 選項(xiàng)指向讀取文件），該文件需要導(dǎo)出一個配置對象。

module.exports = {

    // configuration

};

node.js API

如果使用node.js API 需要將配置對象當(dāng)作參數(shù)傳遞:

webpack({

    // configuration

}, callback);

多個配置對象

在這兩種方法里面，你都可以使用一個配置對象數(shù)組來并行的執(zhí)行。 他們共享數(shù)據(jù)緩存，和監(jiān)聽器，這樣比多次執(zhí)行webpack效率更高。

配置對象內(nèi)容

提示: 記住不要拘泥于在配置對象里面寫純json對象，可以使用你想使用的任何js方法，他僅僅是一個nodejs模塊罷了。

簡單的例子:

{

    context: __dirname + "/app",

    entry: "./entry",

    output: {

        path: __dirname + "/dist",

        filename: "bundle.js"

    }

}

context

用于解析entry選項(xiàng)的基礎(chǔ)目錄(絕對路徑), 如果output.pathinfo設(shè)置了，就包含了縮短過的目錄；（相當(dāng)于公共目錄，下面所有的目錄都在這個公共目錄下面)

默認(rèn): process.cwd()

entry

bundle的入口點(diǎn)。

如果傳入一個字符串，這個字符串就會被解析為啟動時加載的模塊。

如果傳入個數(shù)組，所有模塊都是啟動時加載，模塊導(dǎo)出到最后一個里面。

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

如果傳入一個對象，就會創(chuàng)建多個輸入包文件，對象鍵值就chunk的name，值可以是字符串或者是數(shù)組。

{

  entry: {

      page1: "./page1",

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

  },

  output: {

      // 當(dāng)使用多入口文件時候，要確保在output.filename使用[name]或者[id]

      filename: "[name].bundle.js",

      chunkFilename: "[id].bundle.js"

  }

}

注意: 沒有別的專門來配置入口點(diǎn)的選項(xiàng)。如果你需要一個專門來配置入口點(diǎn)的配置對象，你需要用到多個配置對象.

output

output是影響編譯輸出的選項(xiàng)。output選項(xiàng)告訴webpack怎么把編譯文件寫入磁盤。注意，雖然可以有很多輸入口，但是只有一個輸出配置

如果使用了哈希([hash] 或者 [chunkhash]), 需要確保有一個一致的模塊順序。使用OccurenceOrderPlugin插件或者 recordsPath。(譯者：參看這個issue)

output.filename

指定輸出到硬盤的文件的的文件名。這里不能是一個絕對的路徑！output.path會確定該文件的存在硬盤額路徑的。filename僅僅用來給每個文件命名而已。

關(guān)于“Webpack之配置說明的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。