多頁專案的webpack配置

伯涵發表於2018-07-21
Web
在我們使用vue，angular等框架開發的時候，大多數都是構建單頁專案。而且，像這樣的框架都有對應的命令一步生成webpack配置（比如vue的vue init webpack my-project之類）。


但是如果我們要開發多頁面專案的時候就沒有這麼方便了，你必須要自己配置webpack。

單頁專案和多頁專案的區別在於單頁專案所有的js，css等資源只需要在入口html檔案中引入，你甚至都不需要額外配置，像html-webpack-plugin這樣的外掛自動就幫你把js和css插入了到入index.html中了。

而多頁專案下每個頁面除了有部分共享資源外，還需要引入每個頁面單獨的js，css等檔案。

面對這個區別，關鍵就在於html-webpack-plugin外掛的配置。

首先我們假設所有的頁面入口檔案都在 src/html/ 下，這樣我們可以通過nodejs的fs模組同步讀取該目錄下的所有檔案的名字：

let htmlArr = fs.readdirSync(path.resolve(__dirname, 'src/html'));
複製程式碼

htmlArr中將會儲存一個html目錄下所有檔名的一個陣列，然後我們通過遍歷這個陣列來獲取webpack的entry配置物件和html-webpack-plugin的配置物件：

let entrys = {};
let htmlPlugins = [];
 
for(let item of htmlArr){
	//我們只需要.html前面的檔名
	let name = item.split('.html')[0];
	htmlPlugins.push(new WebpackHtmlPlugin({
		filename: item,
		template: path.resolve(__dirname, `src/html/${item}`),
		//common代表公共模組，name就是html對應的同名js檔案
		//這個配置將會自動在生成的html中插入你指定的js
		chunks: ['common', name]
	}));
	//配置入口
	entrys[name] = `./src/js/${name}.js`;
};
複製程式碼

接下來在webpack配置中傳入上面生成的entrys和htmlPlugins配置物件：

module.exports = merge(base, {
	//傳入entry配置
	entry: entrys,
	devtool: "cheap-module-eval-source-map",
	devServer: {
		contentBase: path.join(__dirname, "dist"),
		compress: true,
		port: 8080,
		//hot: true,
		index: 'index.html',
		open: true
	},
	plugins: [
		//傳入html-webpack-plugin配置物件
		...htmlPlugins,
	]
});
複製程式碼

以上配置是我開發環境下的配置，生產環境下內容會多一點點。配置好之後編譯，你就就會發現html-webpack-plugin為你生成了多個頁面入口html：


多頁專案的webpack配置

其中一個比較關鍵的地方除了html-webpack-plugin的配置外就是使用node的fs模組同步讀取html資料夾中所有檔案的名字，這樣你只要在資料夾中新增一個頁面入口webpack就能自動讀取到：

當然這都是些基礎配置，不過已經可以拿來用了。

這裡我將我的配置內容上傳到了github上：github.com/CSLLG/muti-…

---------------------------8月26日補充內容--------------------------------------

今天補充了更多配置，具體如下：

2018.8.26最新更新

1、完善url-loader對圖片資源的處理功能

2、新增html-withimg-plugin處理html中img標籤src屬性引入的圖片

3、把所有配置檔案遷移到 './build/' 路徑下，目的是讓配置檔案看起來更整潔

4、加入process.evn.NODE_ENV環境配置

5、新增mini-css-extract-plugin，把css檔案從bundle.js中獨立成單獨的css檔案

這次配置調整中遇到的問題及解決方案記錄：

1、按理說使用url-loader處理圖片應該不需要下載file-loader,但是當圖片大小超過限制編譯就會報“can not find modlue file-loader”的錯，官方文件是說“當圖片大小超過限制時會預設使用file-loader”，但不知具體原因是否是因為新版本url-loader將file-loader的功能剔除了。

2、webapck4.0+以上版本不再推薦使用extract-text-webpack-plugin處理css模組，而是推薦mini-css-extract-plugin

不過這裡有一個問題，就是當你把css檔案放入dist/css/目錄下將會導致css中引用的圖片路徑出錯，網上有很多人推薦的解決方案是在output配置中加入 publicPath: '../' 配置，

但其實這樣會導致除了css中引用圖片的路徑是對的外其他所有檔案中的路徑都是錯的，甚至導致css檔案引入錯誤。

最優的解決方案是在引入MiniCssExtractPlugin.loader時使用物件方式，並在options目錄下新增 publicPath: '../' 配置

具體配置請檢視配置檔案

其他的一些問題和對應解決方案會獨立出一篇文章來論述，謝謝

最後，感謝你的耐心閱讀，如果對你有幫助可以點個贊哦！



相關文章