使用Webpack構建多頁面程式

使用webpack搭建單頁面程式十分常見，但在實際開發中我們可能還會有開發多頁面程式的需求，因此我研究了一下如何使用webpack搭建多頁面程式。

將每個頁面所在的資料夾都看作是乙個單獨的單頁面程式目錄，配置多個entry以及html-webpack-plugin即可實現多頁面打包。

下面為本專案目錄結構

.

├─ src
│ └─ pages
│ ├─ about
│ │ ├─ index.css
│ │ ├─ index.html
│ │ └─ index.js
│ └─ index
│ ├─ index.css
│ ├─ index.html
│ └─ index.js
└─ webpack.config.js

const htmlwebpackplugin =

require
('html-webpack-plugin');
module.exports =),
],output:,}
;

傳統的多入口寫法可以寫成鍵值對的形式

module.exports =

,...
}

const glob =

require
('glob');
function
getentry()
; glob.
sync
('./src/pages/**/index.js').
foreach
((file)
=>);
return entry;
}module.exports =

module.exports =

,...
}

const htmlwebpackplugin =

require
('html-webpack-plugin');
module.exports =),
newhtmlwebpackplugin()
,],...
};

const htmlwebpackplugin =

require
('html-webpack-plugin');
const glob =
require
('glob');
function
gethtmltemplate()
;}).
map(
(template)
=>
newhtmlwebpackplugin
(.html`,}
));}
module.exports =
;

// webpack.config.js

const path =
require
('path');
const htmlwebpackplugin =
require
('html-webpack-plugin');
const glob =
require
('glob');
const
=require
('clean-webpack-plugin');
// 多頁入口
function
getentry()
; glob.
sync
('./src/pages/**/index.js').
foreach
((file)
=>);
return entry;
}// 多頁模板
function
gethtmltemplate()
;}).
map(
(template)
=>
newhtmlwebpackplugin
(.html`,}
));}
const config =
, module:,]
,}, plugins:
[new
cleanwebpackplugin()
,...
gethtmltemplate()
],devserver:,}
;module.exports = config;

webpack 構建多頁面應用

如何使用webpack構建多頁面應用，這是乙個我一直在想和解決的問題。網上也給出了很多的例子，很多想法。猛一看，覺得有那麼點兒意思，但仔細看也就那樣。使用webpack這個構建工具，可以使我們少考慮很多的問題。我們常見的單頁面應用只有乙個頁面，它考慮問題，解決問題圍繞著中心化去解決，因此很多麻煩都迎...

webpack多頁面方案

參考文章比較多 react loadable import 這個方案需要 babel plugin syntax dynamic import的支援，記得修改babelrc。一般用這個方案的話是要用react router來寫乙個單頁應用，模板載入乙個入口js，入口js裡把頁面路由寫好，每個頁面作為...

webpack多頁面打包

在src下新建多個js檔案和html模板 在entry裡配置多個入口檔案 entry htmlwebpackplugin裡配置不同的html頁面引用不同的js檔案 const plugins new htmlwebpackplugin new htmlwebpackplugin 但是每次在 entr...