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

多页面中如何解决

作者: 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