webpack多页打包方案

webpack多页面打包（记录下多页打包方案）

• 使用的node中的glob方法
• glob.sync

const path = require("path")
const resolve = dir => path.resolve(__dirname, dir)
const MiniCssExtractPlguin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const glob = require("glob");

const setMpa = () => {
    const entry = {};
    const HtmlWebpackPlugins = [];
    // 此处必须为join才行
    const entryFiles = glob.sync(path.join(__dirname, "./src/page/*/index.js"))
    entryFiles.map((item, index) => {
        const entryFile = item;
        const match = entryFile.match(/src\/page\/(.*)\/index\.js$/)
        const pageName = match[1];
        entry[pageName] = entryFile;
        HtmlWebpackPlugins.push(
            new HtmlWebpackPlugin({
                template: path.join(__dirname, `./src/page/${pageName}/index.html`),
                filename: `${pageName}.html`,
                chunks: [pageName]
            })
        )
    })

    return {
        entry,
        HtmlWebpackPlugins
    }
}

const { entry, HtmlWebpackPlugins } = setMpa()
module.exports = {
    entry,
    output: {
        path: resolve("./dist"),
        filename: "[name]-[hash:6].js"
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    // MiniCssExtractPlguin.loader,
                    "css-loader",
                    "postcss-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    // MiniCssExtractPlguin.loader,
                    "css-loader",
                    "postcss-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    // MiniCssExtractPlguin.loader,
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(png|gif|jpe?g)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: "[name].[ext]",
                        outputPath: "img",
                        limit: 1024 * 14
                    }
                }
            },
            {
                test: /\.woff2$/,
                use: "file-loader"
            }

        ]
    },
    plugins: [
        ...HtmlWebpackPlugins,
        new CleanWebpackPlugin(),
        new MiniCssExtractPlguin({
            filename: "css/[name]-[hash:6].css"
        }),
    ]
}