webpack入門介紹及簡單配置
webpack在當前前端工程師常用的一個工程化打包工具,官方對webpack的介紹是:webpack本質上 是一個現代 JavaScript 應用程式的靜態模組打包器(static module bundler)。在 webpack 處理應用程式時,它會在內部建立一個依賴圖(dependency graph),用於對映到專案需要的每個模組,然後將所有這些依賴生成到一個或多個bundle。
webpack 是一個 高度可配置的打包工具,通過配置,能夠很好的滿足需求。在學習如果配置webpack之前,需要先了解一個webpack的四個核心概念。
四大核心概念:
-
入口(entry)
-
輸出(output)
-
loader
-
外掛(plugins)
入口(entry)
打包的入口:所有的依賴模組都可以通過這個入口直接或間接地找到,也就是構建webpack內部依賴的起點;
單個或多個:(1)多頁面應用,存在多個入口,(2)單頁面應用可能也存在多個入口,打包入口不代表檔案執行的入口,例如我們可以將業務程式碼和框架程式碼分別打包。
基本用法:
在webpack.config.js中配置
module.exports = {
entry: './path/to/my/entry/file.js'
};
其實上述是下面這種物件語法形式的簡寫:
module.exports = { entry: { main: './path/to/my/entry/file.js' } };
物件語法形式看起來繁瑣一點,但是可以定義每一個入口的key,每一個key相當於一個chunk,這有利於擴充套件,例如如果是一個多頁面應用,有多個入口的話,直接在上述的物件語法形式上擴充套件即可,:
module.exports = {
entry: {
main: './path/to/my/entry/file.js',
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
我們也可以往一個入口中傳入一個數組,即相當於把陣列中的多個檔案打包到一個chunk中:
module.exports = {
entry: {
main: ['file1.js','file2.js']
}
};
輸出(output)
output可定值打包後文件輸出的檔名以及輸出路徑,所以output為一個物件,包括兩點:
- filename :用於表示輸出檔案的檔名,
- path:目標輸出目錄 的絕對路徑。
對於單個入口檔案,output可以簡單配置如下:
module.exports = {
output: {
filename: 'bundle.js',
path: '/path/to/my/output'
}
};
以上配置會將打包後的 bundle.js 檔案輸出到 /path/to/my/output 目錄中。
如果有多個入口的話,可以採用佔位符來確保每個檔案具有唯一的名稱:
module.exports = {
entry: {
main: './path/to/my/entry/file.js',
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
};
以上配置會在 /dist 目錄下分別生成:main.js、pageOne.js、pageTwo.js、pageThree.js。
loader
loader 用於對模組的原始碼以及檔案進行轉換,轉換成瀏覽器可直接執行的模組。
常用loader:
- 編譯相關:
babel-loader、ts-loader - 樣式相關:
style-loader、css-loader、less-loader、postcss-loader - 檔案相關:
file-loader、url-loader
由於loader解析模組時, 將從模組路徑(通常將模組路徑認為是 npm install, node_modules)解析,因此我們使用前需要先安裝相對應的 loader,以css-loader為例:
npm install --save-dev style-loader
npm install --save-dev css-loader
使用 loader 的方式有三種:配置、內聯和CLI,常用的是通過配置來使用:
module: {
rules: [
{
test: /\.css$/,
use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ]
}
]
}
(外掛)Plugins
外掛的功能很強大,可以用於解決 loader 無法實現的其他事,例如:
- 參與打包整個過程
- 打包優化和壓縮
- 配置編譯時的變數
外掛的使用方法與loader類似,也需要先安裝,此處以html-webpack-plugin為例:
npm install --save-dev html-webpack-plugin
然後在webpack.config.js中配置:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//外掛
plugins: [
new HtmlWebpackPlugin({
title: 'webpack demo1',
template: path.resolve(TEMPLATES_PATH, 'template.html'),
chunks: ['app'],
})
]
}
先通過require將外掛引入進來,然後,在配置物件中新增一個plugins屬性,plugins的值是一個數組,陣列中可以通過new 方式使用外掛,陣列中可以有多個外掛,且對每一個外掛分別定義options。
html-webpack-plugin是html模板外掛,可以根據你的提供的html模板生成你需要的html檔案,因此我在專案中定義了一個templates資料夾用於放html模板,template.html模板檔案內容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h1>hello webpack!</h1>
</body>
</html>
最後會在build資料夾下生成一個index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack demo1</title>
</head>
<body>
<h1>hello webpack!</h1>
<script type="text/javascript" src="app.js"></script></body>
</html>
可以發現,該外掛會自動將你chunks中的js檔案生成到html檔案的<script>
標籤內,如果你有任何CSS assets 在webpack的輸出中(例如, 利用ExtractTextPlugin提取CSS), 那麼這些將被包含在HTML head中的<link>
標籤內。