webpack2 實踐系列（二）— entry 和 output

源碼地址：https://github.com/silence717/webpack2-demos

具體可參見 demo02-entry-output 目錄下

Entry Points

entry是webpack配置的入口文件的屬性，也是整個項目的主入口，其他依賴的模塊均在這個文件中引入。
使用方式：entry: string | Array<string>

Output

輸出選項告訴webpack如何編寫編譯後的文件到磁盤。雖然能夠有多個入口，可是隻要一個輸出配置項。
下面列舉幾個最主要的配置屬性:

path

打包後的輸出目錄地址，是絕對路徑。

output: {
    path: __dirname + '/'
}

publicPath

正在研究當中，目前遇到一個dev和build環境image路徑的問題，晚點具體補充。

fileName

fileName -- 指定輸出文件的名稱

output: {
    filename: 'bundle.js'
}

單個entry和 output 配置

webpacl.config.js

module.exports  = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/'
    }
};

若是可以保證當前項目只有一個入口，咱們還能夠簡寫爲：

module.exports = {
    entry: {
        main: './index.js'
    },
    output: {
        filename: 'bundle.js',
        path: __dirname + '/'
    }
};

單個入口配置參照： demo02-entry-output/single 目錄下

多個entry 和對於 output

若是咱們配置了多個入口那麼應該使用提花布，確保每一個文件有一個惟一的名稱：

• [name] is replaced by the name of the chunk.

• [hash] is replaced by the hash of the compilation.

• [chunkhash] is replaced by the hash of the chunk.

module.exports = {
    entry: {
        indexOne: './indexOne.js',
        indexTwo: './indexTwo.js'
    },
    output: {
        // filename: '[hash].bundle.js',
        filename: '[name].bundle.js',
        path: __dirname + '/'
    }
};

多個入口配置參照： demo02-entry-output/multi 目錄下