Webpack之MPA多页面打包配置(glob)

Posted 2021-12-24 飞翔的熊blabla

Webpack配置MPA多页面应用时，需要设置多个入口，并通过html-webpack-plugin配置与之对应的页面。

动态获取入口文件，我们使用glob。

npm i glob --save --dev

glob的用法

var Glob = require("glob");
// pattern : 正则 配置符合条件的文件
// options : 配置参数 一般用来设置文件路径
var fileList = glob.sync(pattern, options)
// fileList: 数组，返回文件绝对路径

我们文件结构如下：

src
 - index.html
 - views
   - home
     - index.js
   - system
     - index.js 
webpack.config.js

文件src下的views目录盛放不同页面，每个页面的入口文件都是index.js

获取所有指定文件：

const fileList = glob.sync(path.join(__dirname,'/src/views/*'))

// fileList = ['**/src/views/home','**/src/views/system'];

上述一行，就是我们最重要的代码，后面只需获取文件名、逐文件配置到entry中，并添加在plugins追加文件模版即可。如下可参考：

var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
var glob = require("glob");


const mpaConfig = () => 
	const entry = ;
	const htmlPlugin = [];

	glob.sync(path.join(__dirname,'/src/views/*')).map(file=>
		// 获取文件名称
		const fileName = file.match(/src\\/views\\/(.*)/)[1];
		// 新增入口文件
		entry[fileName] = `$file/index.js`;
		// 新增html文件
		htmlPlugin.push(
			new HtmlWebpackPlugin(
				filename: `$fileName.html`,
				template: `$__dirname/src/index.html`,
				minify: true
			)
		)
	);

	return 
		entry,
		htmlPlugin,
	
;

const  entry, htmlPlugin  = mpaConfig();

module.exports = 
	entry,
	output: 
		path: `$__dirname/dist`,
		filename: '[name]_[chunkhash:8].js'
	,
	mode: 'production',
	plugins: [
		// ...
	].concat(htmlPlugin)
;

可根实际情况调整文件目录，over ~