欢迎您的访问
专注于Java技术系列文章的Java技术分享网站

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/?p=36144

赞(78) 打赏



版权归原创作者所有,任何形式转载请联系作者;搜云库 » webpack 多页面打包

本站:免责声明!

评论 抢沙发

一个专注于Java技术系列文章的技术分享网站

觉得文章有用就打赏一下文章作者

微信扫一扫打赏

微信扫一扫打赏