webpack 多页面打包

1、 引入glob

npm install glob -D

1、 改造entry和htmlwebpackplugin

const setMPA = ()=> {
    const entry = {};
    const htmlWebpackPlugins = [];

    const entryFiles = glob.sync(path.join(__dirname,'./src/*/index.js'));

    Object.keys(entryFiles)
        .map((index) => {
            const entryFile = entryFiles[index];

            const match = entryFile.match(/src\/(.*)\/index\.js/);
            const pageName = match && match[1];

            entry[pageName] = entryFile;

            htmlWebpackPlugins.push(
                new HtmlWebpackPlugin({
                    template:path.join(__dirname,`./src/${pageName}/index.html`),
                    filename:`${pageName}.html`,
                    chunks:[pageName],
                    inject:true,
                    minify:{
                        html5:true,
                        collapseWhitespace:true,
                        preserveLineBreaks:false,
                        minifyCSS:true,
                        removeComments:false
                    } 
                })
            )
        })
    return {
        entry,
        htmlWebpackPlugins
    }
}

const { entry,htmlWebpackPlugins} =  setMPA();

3、修改webpack配置

 entry:entry,
 output:{
    path:path.resolve(__dirname,'dist'),
    filename:'[name].js'
 },
 plugins:[
    ...
 ].concat(htmlWebpackPlugins)

文章永久链接：https://tech.souyunku.com/36144