webpack4.0核心概念（八）———— 多页面打包通用方案 MPA

未处理前的webpack.config.js文件【手动增加多页面】

//两个入口
entry: {index: "./src/index.js",login: "./src/login.js",
},
//出口
output: {path: path.resolve(__dirname, "./dist"),filename: "[name]-[hash:6].js",
},//插件配置plugins: [new htmlWebpackPlugin({template: "./src/index.html",filename: "index.html",chunks: ["main"],}),new htmlWebpackPlugin({template: "./src/index.html",filename: "login.html",chunks: ["login"],}),new CleanWebpackPlugin(),new miniCssExtractPlugin({filename: "css/index-[contenthash:6].css",}),],

处理后的webpack.config.js文件【自动在项目目录中查找多页面】

首先改变目录结构

webpack.config.js主要代码如下

const glob = require("glob");//npm i glob -Dconst setMpa = () => {const entry = {};const htmlWebpackPlugins = [];//生成entryconst entryFiles = glob.sync(path.join(__dirname, "./src/*/index.js"));//目录下面有index.js的目录console.log(entryFiles)entryFiles.map((item, index) => {const entryFile = item;const match = entryFile.match(/src\/(.*)\/index\.js$/);console.log(match)const pageName = match[1];entry[pageName] = entryFile;htmlWebpackPlugins.push(new htmlWebpackPlugin({template: path.join(__dirname, `./src/${pageName}/index.html`),filename: `${pageName}.html`,chunks: [pageName, "detail"],}));});return {entry,htmlWebpackPlugins,};
};const { entry, htmlWebpackPlugins } = setMpa();module.exports = {entry,plugins: [...htmlWebpackPlugins,new CleanWebpackPlugin(),new miniCssExtractPlugin({filename: "css/index-[contenthash:6].css",}),],
}