使用webpack生成html没有插入打包好的js和css

问题描述

问 题

该项目是个多页面应用项目，所以webpack也是多入口，之前

entry:{ user_manger: './srcFile/js/user_manger.js',
        editCompanyInfo:'./srcFile/js/editCompanyInfo.js',
       dtu_manger:'./srcFile/js/dtu_manger.js'
    },
output: { 
        path: path.join(__dirname, 'WebRoot'),
        publicPath: '/',                
        filename: '[name].js',           
        chunkFilename: '[id].chunk.js'  
    }, 
       new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
             filename: './page/user_manger.html', //生成的html存放路径，相对于path
            template: './srcFile/page/user_manger.html', //html模板路径
          inject: 'body', //js插入的位置，true/'head'/'body'/false
           hash: true, //为静态资源生成hash值
            chunks: ['vendors', 'user_manger'],//需要引入的chunk，不配置就会引入所有页面的资源
            minify: { //压缩HTML文件    
                removeComments: true, //移除HTML中的注释
                collapseWhitespace: false //删除空白符与换行符
            }
      }),

这样写的时候能够很好的生成htmljscss，并且将相应的js和css插入到生成的html中，但是，页面如果多的话，这样写的话时非常恶心的，所以就想优化一下，改成下面：

var entries=getEntry('./srcFile/js/*.js');

 entry:entries,
出口不变,
function getEntry(globPath){
    var entries={},
    basename,tmp,pathname;
    glob.sync(globPath).forEach(function(entry){
        basename=path.basename(entry,path.extname(entry));
        tmp=entry.split('/').splice(-3);
        pathname=tmp.splice(1,1)+"/"+basename;
        entries[pathname]=entry;
    });
    console.log("dev-entrys");
    console.log(entries);
    return entries;
}
var pages=getEntry('./srcFile/page/*.html');
console.log("dev pages-------------");
for(var pathname in pages){
    console.log("filename:"+pathname+".html");
    console.log("template:"+pages[pathname]);
    var newpathname=pathname.split("/");
    var conf={
        filename:pathname+".html",
        template:pages[pathname],
        hash: true, //为静态资源生成hash值
        minify:{
            removeComments:true,
            collapseWhitespace: false //删除空白符与换行符
        },
        inject:'body',
        chunks:[newpathname[1],"vendor"]
    };
    module.exports.plugins.push(new HtmlWebpackPlugin(conf))
}

这样写完之后，看起来简洁多了，也能按照指定的路径打包生成好html、js、css，但是生成的html文件没有插入打包好的css和js。。。。不知道时哪里写的不对呢~求指教

解决方案

我估摸着问题还是出在拼凑HtmlWebpackPlugin参数的时候的问题，我建议你把拼出来的参数对象打印出来，跟原来的比对一下。

另外，我发现你原先配置里chunks: ['vendors', 'user_manger']的vendors怎么变成chunks:[newpathname[1],"vendor"]里的vendor了。

这篇关于使用webpack生成html没有插入打包好的js和css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！