多页面中如何解决

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>
<% } %>
<% } %>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容