webpack.config.js配置文件:
entry:{
index:"./src/index",
list:"./src/list",
detail:"./src/detail"
}
new htmlWebpackPlugins({
title: "index.html",
template: path.join(__dirname, "./src/index/index.html"),
filename:"index.html",
chunks:[index]
})
1.
⽬录结构调整
src
index
index.js
index.html
list
index.js
index.html
detail
index.js
index.html
使⽤
glob.sync
第三⽅库来匹配路径
npm i glob -D
const glob = require("glob")
//MPA多⻚⾯打包通⽤⽅案
const setMPA = () => {
const entry = {};
const htmlWebpackPlugins = [];
return {
entry,
htmlWebpackPlugins
};
};
const { entry, htmlWebpackPlugins } = setMPA();
const path = require("path");
const glob = require("glob");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const setMPA = () => {
const entry = {};
const htmlWebpackPlugin = [];
// 分析入口
const entryFiles = glob.sync(path.join(__dirname, "./src/*/index.js"));
// ! 过滤信息拿到入口文件名称
console.log(entryFiles);
entryFiles.map((item, index) => {
const entryFile = entryFiles[index]; // 单独路径
const match = entryFile.match(/src\/(.*)\/index\.js$/);
console.log(match);
const pageName = match && match[1];
entry[pageName] = entryFile;
// 配置 htmlplugin
htmlWebpackPlugin.push(
new HtmlWebpackPlugin({
title: pageName,
template: path.join(__dirname,`src/${pageName}/index.html`),
filename: `${pageName}.html`,
chunks: [pageName],
inject: true
})
);
});
console.log(entry);
return {
entry,
htmlWebpackPlugin,
};
};
const { entry, htmlWebpackPlugin } = setMPA();
module.exports = {
entry,
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name]_[chunkhash:8].js",
},
mode: "development",
plugins: [...htmlWebpackPlugin],
};