entry和context——webpack第二篇

前言

配置webpack的環節中，entry是必不可少的一個環節，我最近作了一篇關於webpack的分享，而後也想作一個關於webpack的一個系列，講講我對於webpack的理解，以及我對於咱們工程架構的理解。有興趣的也能夠關注一下個人github，能夠點個關注，喜歡或者收藏謝了0.0

entry和context——是什麼

在能有什麼用以前，然咱們前去了解一下他們兩個究竟是什麼，其實entry和context從英文層面上咱們就能夠清晰的知道，一個是入口的意思，還有一個是上下文的意思，那麼咱們想知道他們到底有什麼用，請看下面。

context

關於context的demo

其實這個目錄結構是這樣的，有興趣的能夠去看一下這個小demo，是這個上下文的示意。

文件的目錄結構

目錄中的dist是我打包出來的文件，而app中的文件是我書寫的原文件，而webpack.config.js中的代碼是這樣的

const path = require('path');

module.exports = {
    context: path.resolve(__dirname, 'app'),
    entry: './main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}複製代碼

看這段代碼，其實咱們就能夠猜到context的做用了，若是沒有這個context，那咱們的entry應該怎麼寫，是否是應該書寫成

'./app/main.js'複製代碼

還好我app中就一個main.js，要是來10個或者100個，那要多寫多少個app，因此咱們能夠看到context的做用。他就是會將entry的根路口指向app這個文件夾

entry

講完context，那麼咱們應該要來說講什麼呢，固然是entry入口文件啦，對於一個webpack打包配置文件來講，entry是咱們最初配置的時候就該解決的問題。

對於entry這個配置項來講，咱們能夠把他分類型來看，entry一共能夠分爲string、array和object。其餘的都是這幾種的組合。

string

對於字符串，其實這是一個單一的入口，是一個一對一或者一對多的關係，在如今的單頁應用SPA上面用的不少，咱們能夠來看一下咱們的demo。

在demo中咱們的目錄結構是這樣的

目錄結構

咱們能夠看一下webpack.config.js中的代碼：

module.exports = {
    entry: './main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    }
}複製代碼

這是個一對一的關係，一個入口，產出一個bundle.js，因此這個是舉個例子，比較簡單，可是在真實的單頁應用中，不會這麼簡單，他會是一個一對多的關係，一個入口，而後webpack會解析依賴而後將其打包多個文件。

array

講完字符串咱們來說講數組是個什麼關係呢，數組實際上是多對一的關係，就是入口能夠是多個文件，可是出口會是一個模塊，這個能夠用在哪裏呢，好比，咱們項目中確定會有不少公用的模塊，那麼這些模塊有必要打包到不少個文件中麼，答案固然是沒有這個必要的，放一個裏面，咱們只要在html中引入一個就好了，多省事，還會用在這種狀況上，好比jquery和lodash這樣的不相互依賴的文件能夠放到一個模塊中。那咱們來看看具體的demo

在demo中咱們的目錄結構是這樣的

目錄結構

咱們能夠看一下webpack.config.js中的代碼：

module.exports = {
    entry: ['./main1.js', './main2.js'],
    output: {
        path: __dirname,
        filename: 'bundle.js'
    }
}複製代碼

到這裏咱們能夠打開index.html文件看一下，是否是main1.js和main2.js中的兩條代碼都在bundle.js中了，因此，這個多對一的關係能夠很好的用到真實的項目中。

object

最後一個對象，不用說你們應該也猜獲得，固然是多對多的關係。也是在多頁面應用中咱們常常用到的，我這裏舉一個簡單點的例子，具體的demo

在demo中咱們的目錄結構是這樣的

目錄結構

咱們能夠看一下webpack.config.js中的代碼：

module.exports = {
    entry: {
        one: './main1.js',
        two: './main2.js',
        'path/to/main': './main3.js'
    },
    output: {
        path: __dirname,
        filename: '[name].js'
    }
}複製代碼

咱們能夠看到，前兩個entry對象的鍵值對仍是比較正常的，但第三個的時候我卻把它換成了一個路徑名，可是webpack很聰明，看到目錄結構你就知道，其實webpack會解析這個路徑，而後他會幫咱們建立相對應的路徑，好比，path文件夾中有to文件夾，在to文件夾中還有main.js。

可是在實際的項目中，entry確定不會變的這麼簡單，我能夠給你們提供幾個例子，關於entry對象的收集，由於若是是數組和字符串，在單頁應用中算簡單的，可是在多頁面應用中倒是困難重重。

實際項目中的entry

待收集資源的目錄結構

收集entry對象的函數

const glob = require('glob')
const path = require('path')

const GLOB_FILE_PATH = './src/pages/**/index.js'
const CUT_PATH = './src/pages/'

exports.getEntries = function(argv){
    let  paths = glob.sync(GLOB_FILE_PATH)
    let  entries = {}
    for (let i = 0; i < paths.length; i++){
        let pathName = path.dirname(paths[i]).replace(new RegExp('^' + CUT_PATH), '')
        entries[pathName] = paths[i]
    }
    return entries
}複製代碼

這裏用正則來提取的鍵值對，有興趣的同窗也能夠去了解一下glob這個文件讀取模塊。

總結

這算是個人第二篇webpack的文章，也是但願能給我我的的webpack系列文章有一個很好的開始，寫寫你們的支持，我會將webpack的配置項一個一個拿出來說，而後配上demo這樣但願能讓你們更好的理解，這期講了比較簡單點的context和entry。下期將會帶來output，但願喜歡的能夠去個人github上面點個star，文章屬於純原創，轉載請註明出處謝謝