1. 什么是webpack
先來(lái)看看官網(wǎng)對(duì)webpack的介紹 ：
本質(zhì)上玖翅，webpack是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)屯远。當(dāng) webpack 處理應(yīng)用程序時(shí)嗜闻，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)烤镐，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè)bundle。
簡(jiǎn)單來(lái)說(shuō)webpack就是一個(gè)JavaScript的打包器，將各種模塊（module）打包成資源文件吠冤；還可以通過(guò) Code Spliting 來(lái)把代碼分離到不同的 bundle 中，然后可以按需加載或并行加載這些文件恭理；webpack 可以使用 loader 來(lái)預(yù)處理文件拯辙，這允許你打包除了JavaScript 之外的任何靜態(tài)資源。
官網(wǎng)首頁(yè)很清晰的展示了webpack的主要功能：
?
我們可以看到颜价，一堆 modules 經(jīng)過(guò) webpack 打包處理成了各種靜態(tài)資源薄风。這就是 webpack
2. webpack核心概念
在開(kāi)始學(xué)習(xí) webpack 之前，你需要了解 webpack 的四個(gè)核心概念：
- 入口（entry）
- 出口（output）
- loader
- 插件（plugins）
2.1 入口（entry）
入口指示 webpack 應(yīng)該使用哪個(gè)模塊拍嵌，來(lái)開(kāi)始構(gòu)建其內(nèi)部依賴。進(jìn)入入口后循诉，webpack 會(huì)找出有哪些模塊和庫(kù)是與入口相依賴的横辆。
我們可以在webpack配置中配置entry屬性，來(lái)設(shè)置一個(gè)或多個(gè)入口起點(diǎn)。以下是一個(gè)簡(jiǎn)單的entry配置：
const config = {
entry: {
main: 'path/to/your/entry/index.js'
}
}
module.exports = config
2.2 出口（output）
設(shè)置output是為了告訴webpack要在哪里輸出其創(chuàng)建的bundle狈蚤，并且可以對(duì)bundle命名困肩。示例：
const path = require('path')
const config = {
entry: {
main: 'path/to/your/entry/index.js'
}，
output: {
filename:'[name].bundle.js',
path: path.join(__dirname,'./dist')
}
}
module.exports = config
我們通過(guò) output.filename 來(lái)設(shè)置輸出bundle的文件名脆侮， output.path 來(lái)設(shè)置 bundle 的輸出路徑
path 是 nodeJs 中的核心模塊锌畸，用來(lái)處理項(xiàng)目中的路徑。
2.3 loader
由于 webpack 只認(rèn)識(shí) JavaScript 代碼靖避，因此就需要借助其他方法來(lái)處理那些非 JavaScript 文件潭枣，如 css、image幻捏、font等盆犁。而 loader 可以將所有類(lèi)型的文件處理成 webpack 能夠識(shí)別的有效模塊，然后再對(duì)其進(jìn)行處理篡九。
loader 中有兩個(gè)重要屬性：
- test屬性谐岁，用于標(biāo)識(shí)出應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個(gè)或某些文件，通常是一個(gè)正則表達(dá)式榛臼；
- use屬性伊佃，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè) loader沛善；
const path = require('path')
const config = {
entry: {
main: 'path/to/your/entry/index.js'
}航揉，
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, './dist')
},
module: {
loaders: [
{
test: /\.ejs$/,
use: ['ejs-loader']
}
]
}
}
module.exports = config
以上示例中l(wèi)oader的配置相當(dāng)于告訴webpack在遇到 .ejs 的文件時(shí)，在打包之前先用 ejs-loader 裝換一下路呜。
2.4 插件（plugins）
loader 被用于轉(zhuǎn)換某些類(lèi)型的模塊迷捧，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。想要使用一個(gè)插件胀葱，你只需要require()它漠秋，然后把它添加到plugins數(shù)組中。多數(shù)插件可以通過(guò)選項(xiàng)(option)自定義抵屿。
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 通過(guò) npm 安裝
const config = {
entry: {
main: 'path/to/your/entry/index.js'
}庆锦，
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, './dist')
},
module: {
loaders: [
{
test: /\.ejs$/,
use: ['ejs-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'webpack demo',
template: path.join(__dirname, './index.html')
})
]
}
module.exports = config
HtmlWebpackPlugin 將為你生成一個(gè) HTML5 文件， 其中包括使用script標(biāo)簽的 body 中的所有 webpack 包轧葛，webpack 提供提供了許多功能強(qiáng)大的插件搂抒，查閱插件列表獲取更多插件的使用方法。
