美文网首页
多页面中如何解决

多页面中如何解决

作者: wyq_0bed | 来源:发表于2017-06-28 20:24 被阅读0次
module.exports = {
    entry: {
        max: './script/max.js',
        wyq:'./script/wyq.js',
        a:'./script/a.js',
        b:'./script/b.js'
    },//入口文件
    output: {
        path: '../dist',//指定路径
        filename: './js/[name]-[chunkhash].js',//文件名
        publicPath: 'http://cdn.com/'
    },//打包文件存放处
    plugins: [
        new htmlWebpackPlugin({
            template:'index.html',
            filename:'a.html',//指定文件名
            inject:'head',//放在哪个标签内
            title:'webpack is a',
            chunks:['max','a']
        }),
        //多页面情况
        new htmlWebpackPlugin({
            template:'index.html',
            filename:'b.html',//指定文件名
            inject:'head',//放在哪个标签内
            title:'webpack is b',
            chunks:['wyq','b']//分别引入entry中的js
        }),
    ] //生成的打包js与html相关联
}

除了chunks之外,excludeChunks也可以实现

让性能更好一些

在template指向下的index,html页面当中
<script type="text/javascript">
        <%= htmlWebpackPlugin.files.chunks.hello.entry.substr(htmlWebpackPlugin.files.publicPath.length) %>
    </script>
运行之后的结果
 ./js/hello-7ffc0665ce562b25b25f.js
如果
htmlWebpackPlugin.files.chunks.hello.entry
结果
 http://cdn.com/./js/hello-7ffc0665ce562b25b25f.js

最后
<%=
               compilation.assets[htmlWebpackPlugin.files.chunks.hello.entry.
               substr(htmlWebpackPlugin.files.publicPath.length)].source() %>

<% for(var k in htmlWebpackPlugin.files.chunks){%>
<% if(k !== 'hello'){%>
<script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>">

</script>
<% } %>
<% } %>

相关文章

网友评论

      本文标题:多页面中如何解决

      本文链接:https://www.haomeiwen.com/subject/cvcpcxtx.html