webpack學習筆記（一）

以前的項目中一直在使用webpack打包react應用，可是接觸到的並不深。最近沒什麼事情，正好來整理一下webpack的相關知識。

什麼是webpack？

webpack和大多數的模塊打包機不一樣，它是將項目做爲一個總體，而後經過一個給定的主文件，webpack將從這個主文件開始找到項目的全部依賴文件，並使用loaders來處理它們，最終打包成一個或多個瀏覽器可識別的js文件。

如何安裝？

npm install webpack webpack-dev-server --save-dev

webpack就是咱們須要的模塊打包機，webpack-dev-server用來建立本地服務器，用來監聽代碼的修改並自動刷新修改後的結果。

配置

1.Entry

entry是配置模塊的入口，webpack執行構建的第一步將從入口開始查找及遞歸解析全部入口依賴的模塊。

entry配置是必填的，若是不填將致使webpack報錯退出。

Entry 類型

類型	例子	含義
字符串	‘./src/app.js’	入口模塊的文件路徑，能夠是相對路徑
對象	{app: './src/app.js', vendor: './src/vendor.js'}	適合於多個入口的配置，每一個入口會成生產一個chunk文件。能夠經過將公共模塊和應用模塊分隔從而將公共模塊進行緩存，避免對公共模塊的單獨打包；或者在多頁面應用中，將不一樣的頁面單獨打包
數組	[‘./src/main1.js’, ‘./src/main2.js’]	和字符串類型的entry相似，也能夠是相對路徑，適合於多主入口狀況下，將多個主入口打包成一個chunk

2 Output

output配置如何輸出最後的代碼。output是一個object，包含如下一系列配置項：

path

path用來配置輸出文件在本地存放的目錄，必須爲string類型的絕對目錄，以下（使用Node.js的path去獲取絕對路徑）：

path: __dirname + '/dist'

publicPath

在複雜的項目裏可能會有一些構建出的資源須要異步加載，加載這些異步資源須要對應的 URL 地址。

output.publicPath 配置發佈到線上資源的 URL 前綴，爲string 類型。 默認值是空字符串 ''，即便用相對路徑。

這時在發佈到線上的HTML在引入JavaScript文件的時候就須要：

<script src='https://cdn.example.com/assets/a_12345678.js'></script>

filename

output.filename配置輸出文件的名稱，爲string類型。若是隻有一個輸入文件，能夠寫成以下：

filename: 'bundle.js'

若是有多個chunk須要輸出，能夠根據模板和變量來進行命名。webpack會對每一個chunk取名，根據chunk名取名以下：

filename: '[name].js'

 entry和output配置以下：

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
　　 //  使用publicPath的狀況下
　　 publicPath: 'https://cdn.example.com/assets'
  }
};

內置變量除了name還有如下：

變量名	含義
id	Chunk 的惟一標識，從0開始
name	Chunk 的名稱
hash	Chunk 的惟一標識的 Hash 值
chunkhash	Chunk 內容的 Hash 值

ChunkFilename

output.chunkFilename 配置無入口的 Chunk 在輸出時的文件名稱。 chunkFilename 和上面的 filename 很是相似，但 chunkFilename 只用於指定在運行過程當中生成的 Chunk 在輸出時的文件名稱。 常見的會在運行時生成 Chunk 場景有在使用 CommonChunkPlugin、使用 import('path/to/module') 動態加載等時。 chunkFilename 支持和 filename 一致的內置變量。