Webpack實戰（三）：做爲前端你不得不懂的Webpack資源入口和出口的配置

關於Webpack前兩篇跟你們分享的主要是Webpack的一些基本的配置，今天開始咱們詳細瞭解一下有關Webpack的各類配置，今天主要跟你們分享的是Webpack的資源入口和資源出口的配置。

若是想了解前兩篇的文章請訪問下面的地址：

Webpack實戰（一）：Webpack打包工具安裝及參數配置

Webpack實戰（二）：webpack-dev-server的介紹與用法

資源入口配置

資源入口配置是Webpack配置中不可缺乏的一個環節，Webpack經過context和entry這兩個配置項來共同決定入口文件的路徑。從英文翻譯過來的字面的意思能夠了解到context是上下文的意思，entry是入口，在配置入口的時候其實作了兩件事情：

• 肯定入口模塊位置，告訴Webpack從哪裏開始進行打包。
• 定義chunk name。若是工程只有一個入口，那麼默認其chunk name爲「main」；若是工程有多個入口，咱們須要爲每一個入口定義chunk name，來做爲該chunk的惟一標識。

context能夠理解爲資源入口的路徑前綴，在配置時要求必須使用絕對路徑的形式,配置代碼例子以下：

const path = require('path')
module.exports = {
  context: path.join(__dirname, './src')
  entry: './index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'development',
  "devServer": {
    "publicPath": './dist',
    "port": 3000 
  }
}

其實context 的配置至關於引入前綴‘src’，若是不用context，能夠配置成

entry: './src/index.js'

context這個配置能夠省略，配置context的主要目的是讓entry的編寫更加簡潔，尤爲是在多入口的狀況下。

entry的配置能夠有多種形式：字符串、數組、對象、函數。能夠根據不一樣的需求場景來選擇。

1. 字符串類型入口
   直接傳入路徑入口，以下

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  mode: 'development',
  "devServer": {
    "publicPath": './dist',
    "port": 3000 
  }
}

1. 數組類型入口
   傳入一個數組的做用是將多個資源預先合併，在打包時Webpack會將數組中的最後一個元素做爲實際的入口路徑。如：

module.exports = {
    entry: ['./add.js', './index.js'],
    output: {
        filename: 'bundle.js'
    }
}

其實這種作法至關於字符串引入的一種，就如

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  }
}
// index.js 文件引入add文件
import './add'

數組類型入口其實數組裏的js文件最後仍是合併到一個文件bundle.js上

1. 對象類型入口
   若是想要定義多入口，則必須使用對象的形式。對象的屬性名（key）是chunk name，屬性值（value）是入口路徑。如

module.exports = {
  entry: {
    index: './src/index.js', // chunk name 爲 index
    add: './src/add.js' // chunk name 爲 add
},
  output: {
    filename: 'bundle.js'
  }
}

注意：對象的屬性值也能夠爲字符串或數組。

module.exports = {
  entry: {
    index: ['./add2.js', './index.js'] // chunk name 爲 index
    add: './src/add.js' // chunk name 爲 add
},
  output: {
    filename: 'bundle.js'
  }
}

1. 函數類型入口

用函數定義入口時，只要返回上面介紹的任何配置形式便可，如：

// 返回字符串形式的入口
module.exports = {
  entry: () => './src/index.js',
  output: {
    filename: 'bundle.js'
  }
}

// 返回對象形式的入口
module.exports = {
  entry: () => ({
    index: ['./add2.js', './index.js'] // chunk name 爲 index
    add: './src/add.js' // chunk name 爲 add
  }),
  output: {
    filename: 'bundle.js'
  }
}

用函數做爲一個入口的好處是咱們能夠在函數體裏添加一些動態的邏輯來獲取項目的入口，另外，函數也支持返回一個Promise對象來進行異步操做。例子以下：

module.exports = {
  entry: () => new Promise((resolve) => {
  // 模擬異步操做
  setTimeout(()=> {
    resolve('./src/index.js')
    }, 1000)
  }),
  output: {
    filename: 'bundle.js'
  }
}

資源出口配置

接下來，讓咱們詳細去了解一下資源出口的配置，資源出口配置的參數大部分都在output裏面，這裏先了解一下幾個經常使用的配置參數。

1. filename
   filename是控制輸出資源的文件名，是字符串形式
   如：

const path = require('path')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: './index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'development',
  "devServer": {
    "publicPath": './dist',
    "port": 3000 
  }
}

打包效果以下

filename不只能夠是文件名，也能夠是路徑，以下：

const path = require('path')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: './index.js',
  output: {
    filename: './dist/bundle.js'
  },
  mode: 'development'
}

在多入口的場景中，若是須要爲對應產生的每一個bundle指定不一樣的名字，Webpack支持使用一種相似模板語言的形式動態地生成文件名，如：

const path = require('path')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js', //chunk name 爲index
    index2: './index2.js' //chunk name 爲index2
  },
  output: {
    filename: '[name].js'
  },
  mode: 'development'
}

在資源輸出時，上面配置的filename中的[name]會被替換爲chunk name，所以最後項目中實際生成的資源是index.js與index2.js

在咱們作實際項目中，使用比較多的是[name]，它與chunk是一一對應的關係，而且可讀性較高。若是要控制客戶端緩存，最好還要加上[chunkhash]，由於每一個chunk所產生的[chunkhash]只與自身內容有關，單個chunk內容的改變不會影響其餘資源，能夠最精確地讓客戶端緩存獲得更新。

以下：

const path = require('path')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js',
    index2: './index2.js'
  },
  output: {
    filename: '[name]@[chunkhash].js'
  },
  mode: 'development'
}

打包的效果以下：

這個[chunkhash] 更新緩存配置通常只在生產環境中配置，不在開發環境中配置

1. path參數
   path能夠指定資源輸出的位置，要求值必須爲絕對路徑。如：

const path = require('path')
module.exports = {
  context: path.join(__dirname, './src'),
  entry: {
    index: './index.js',
    index2: './index2.js'
  },
  output: {
    path: path.join(__dirname, 'dist')
    filename: '[name]@[chunkhash].js'
  },
  mode: 'development'
}

在Webpack 4以後，output.path已經默認爲dist目錄，除非咱們須要更改它，不然沒必要單獨配置。

• publicPath

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  mode: 'development',
  "devServer": {
    "publicPath": './dist',
    "port": 3000 
  }
}

publicPath跟path有很大的區別:path用來指定資源的輸出位置，而publicPath則用來指定資源的請求位置的。

• 輸出位置：打包完成後資源產生的目錄，通常將其指定爲項目中的dist目錄。
• 請求位置：由JS或CSS所請求的間接資源路徑。頁面中的資源分爲兩種，一種是由HTML頁面直接請求的，好比經過script標籤加載的JS；另外一種是由JS或CSS請求的，如異步加載的JS、從CSS請求的圖片字體等。publicPath的做用就是指定這部分間接資源的請求位置。

webpack-dev-server的配置中也有一個publicPath，可是，這個publicPath與Webpack中的配置項含義不一樣，它的做用是指定webpack-dev-server的靜態資源服務路徑。詳情請查看《Webpack實戰（二）：webpack-dev-server的介紹與用法》

爲了不開發環境和生產環境產生不一致而形成開發者的疑惑，咱們能夠將webpack-dev-server的publicPath與Webpack中的output.path保持一致，這樣在任何環境下資源輸出的目錄都是相同的

總結

有關Webpack資源入口和資源出口的配置就暫時分析到這裏，這僅表明我的觀點,歡迎拍磚，如想了解更多請掃描下面：