webpack多页面打包通用方案

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],
};