1. 什麼是webpack
先來看看官網對webpack的介紹 :
本質上,webpack是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程序需要的每個模塊,然後將所有這些模塊打包成一個或多個bundle。
簡單來說webpack就是一個JavaScript的打包器,將各種模塊(module)打包成資源文件;還可以通過 Code Spliting 來把代碼分離到不同的 bundle 中,然後可以按需加載或並行加載這些文件;webpack 可以使用 loader 來預處理文件,這允許你打包除了JavaScript 之外的任何靜態資源。
官網首頁很清晰的展示了webpack的主要功能:
我們可以看到,一堆 modules 經過 webpack 打包處理成了各種靜態資源。這就是 webpack
2. webpack核心概念
在開始學習 webpack 之前,你需要了解 webpack 的四個核心概念:
- 入口(entry)
- 出口(output)
- loader
- 插件(plugins)
2.1 入口(entry)
入口指示 webpack 應該使用哪個模塊,來開始構建其內部依賴。進入入口後,webpack 會找出有哪些模塊和庫是與入口相依賴的。
我們可以在webpack配置中配置entry屬性,來設置一個或多個入口起點。以下是一個簡單的entry配置:
const config = {
entry: {
main: 'path/to/your/entry/index.js'
}
}
module.exports = config
2.2 出口(output)
設置output是爲了告訴webpack要在哪裏輸出其創建的bundle,並且可以對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
我們通過 output.filename 來設置輸出bundle的文件名, output.path 來設置 bundle 的輸出路徑
path 是 nodeJs 中的核心模塊,用來處理項目中的路徑。
2.3 loader
由於 webpack 只認識 JavaScript 代碼,因此就需要藉助其他方法來處理那些非 JavaScript 文件,如 css、image、font等。而 loader 可以將所有類型的文件處理成 webpack 能夠識別的有效模塊,然後再對其進行處理。
loader 中有兩個重要屬性:
- test屬性,用於標識出應該被對應的 loader 進行轉換的某個或某些文件,通常是一個正則表達式;
- use屬性,表示進行轉換時,應該使用哪個 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
以上示例中loader的配置相當於告訴webpack在遇到 .ejs 的文件時,在打包之前先用 ejs-loader 裝換一下。
2.4 插件(plugins)
loader 被用於轉換某些類型的模塊,而插件則可以用於執行範圍更廣的任務。想要使用一個插件,你只需要require()它,然後把它添加到plugins數組中。多數插件可以通過選項(option)自定義。
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 通過 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 將爲你生成一個 HTML5 文件, 其中包括使用script標籤的 body 中的所有 webpack 包,webpack 提供提供了許多功能強大的插件,查閱插件列表獲取更多插件的使用方法。
本人才疏學淺,不當之處歡迎批評指正