使用webpack搭建單頁面程序十分常見，但在實際開發(fā)中我們可能還會有開發(fā)多頁面程序的需求，因此我研究了一下如何使用webpack搭建多頁面程序。
原理
將每個頁面所在的文件夾都看作是一個單獨的單頁面程序目錄，配置多個entry以及html-webpack-plugin即可實現(xiàn)多頁面打包。
下面為本項目目錄結構
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.├─ src│ └─ pages│ ├─ about│ │ ├─ index.css│ │ ├─ index.html│ │ └─ index.js│ └─ index│ ├─ index.css│ ├─ index.html│ └─ index.js└─ webpack.config.js |
單頁面打包基礎配置
首先我們來看一下單頁面程序的 webpack 基礎配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
module.exports = { entry: './src/index.js', plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', }), ], output: { path: path.resolve(__dirname, './dist'), filename: 'bundle.js', },}; |
要想將其改為多頁面程序，就要將它的單入口和單 HTML 模板改為多入口和多 HTML 模板
多頁面打包基礎配置
改造入口
傳統(tǒng)的多入口寫法可以寫成鍵值對的形式
|
1
2
3
4
5
6
7
|
module.exports = { entry: { index: './src/pages/index/index.js', about: './src/pages/about/index.js', }, ...} |
這樣寫的話，每增加一個頁面就需要手動添加一個入口，比較麻煩，因此我們可以定義一個根據(jù)目錄生成入口的函數(shù)來簡化我們的操作
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const glob = require('glob');function getEntry() { const entry = {}; glob.sync('./src/pages/**/index.js').forEach((file) => { const name = file.match(/\/pages\/(.+)\/index.js/)[1]; entry[name] = file; }); return entry;}module.exports = { entry: getEntry(), ...} |
改造輸出
在輸出的配置項中，再將輸出的文件名寫死顯示已經(jīng)不合適了，因此我們要將名字改為與源文件相匹配的名字
|
1
2
3
4
5
6
7
8
|
module.exports = { ... output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name].[contenthash].js', }, ...} |
配置多個 html-webpack-plugin
與入口相同，可以將不同的 html 模板直接寫入插件配置中，這里我們需要為每個插件配置不同的chunks，防止 js 注入到錯誤的 html 中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { ... plugins: [ new HtmlWebpackPlugin({ template: './src/pages/index/index.html', chunks: ['index'], filename: 'index.html', }), new HtmlWebpackPlugin({ template: './src/pages/about/index.html', chunks: ['about'], filename: 'about.html', }), ], ...}; |
這樣的做法與入口有著同樣的毛病，因此我們再定義一個函數(shù)來生成這個配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
const HtmlWebpackPlugin = require('html-webpack-plugin');const glob = require('glob');function getHtmlTemplate() { return glob .sync('./src/pages/**/index.html') .map((file) => { return { name: file.match(/\/pages\/(.+)\/index.html/)[1], path: file }; }) .map( (template) => new HtmlWebpackPlugin({ template: template.path, chunks: [template.name.toString()], filename: `${template.name}.html`, }) );} module.exports = { ... plugins: [...getHtmlTemplate()], ...}; |
這樣一個簡單的多頁面項目就配置完成了，我們還可以在此基礎上添加熱更新、代碼分割等功能，有興趣的可以自己嘗試一下
完整配置
項目地址：xmy6364/webpack-multipage
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
// webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const glob = require('glob');const { CleanWebpackPlugin } = require('clean-webpack-plugin');// 多頁入口function getEntry() { const entry = {}; glob.sync('./src/pages/**/index.js').forEach((file) => { const name = file.match(/\/pages\/(.+)\/index.js/)[1]; entry[name] = file; }); return entry;}// 多頁模板function getHtmlTemplate() { return glob .sync('./src/pages/**/index.html') .map((file) => { return { name: file.match(/\/pages\/(.+)\/index.html/)[1], path: file }; }) .map( (template) => new HtmlWebpackPlugin({ template: template.path, chunks: [template.name.toString()], filename: `${template.name}.html`, }) );}const config = { mode: 'production', entry: getEntry(), output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name].[contenthash].js', }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [new CleanWebpackPlugin(), ...getHtmlTemplate()], devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 3000, hot: true, open: true, },};module.exports = config; |
到此這篇關于使用Webpack構建多頁面程序的實現(xiàn)步驟的文章就介紹到這了,更多相關Webpack構建多頁面內容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/xueyubao/p/14539869.html
