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

本文主要是介绍Webpack之MPA多页面打包配置(glob)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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)
};