Webpack之配置說明的示例分析

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

CLI

如果你使用CLI ，webpack 會默認讀取webpack.config.js（或者通過 --config 選項指向讀取文件），該文件需要導出一個配置對象。

module.exports = {

    // configuration

};

node.js API

如果使用node.js API 需要將配置對象當作參數傳遞:

webpack({

    // configuration

}, callback);

多個配置對象

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

配置對象內容

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

簡單的例子:

{

    context: __dirname + "/app",

    entry: "./entry",

    output: {

        path: __dirname + "/dist",

        filename: "bundle.js"

    }

}

context

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

默認: process.cwd()

entry

bundle的入口點。

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

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

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

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

{

  entry: {

      page1: "./page1",

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

  },

  output: {

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

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

      chunkFilename: "[id].bundle.js"

  }

}

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

output

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

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

output.filename

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

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