webpack

单页面下的基本配置
webpack.config.js

var htmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
    entry:{
        main:'./src/script/main.js',
        a:'./src/script/a.js',
    },
    output:{
        path:'/Users/flyme/Documents/web/learn/learn_webpack/webpack-demo/dist',
        filename:'js/[name]-[chunkhash].js',
        publicPath:'http://cdn.com/'//引入js的默认路径，上线时很又用
    },
    plugins:[
        new htmlWebpackPlugin({//有两个属性files和optios
            template:'index.html',//将script标签引入到index.html中
            //filename:'index-[hash].html',//生成的html文件的名字,若是这样写每次更新都会根据hash重新生成这个html 文件
            filename:'index.html',
            inject:'head',//script标签被嵌入到哪里,
            title:'hello,i am title',//在html的title标签中使用ejs的写法引入<%= htmlWebpackPlugin.options.title %>
            minify:{//对当前生成的html文件进行压缩
                removeComments:true,//删除注释
                collapseWhitespace:true//删除空格

            }
        })
    ]
}

index.html

    
    
    


      <% for(var key in htmlWebpackPlugin.files){%>
            <%= key%>:<%= htmlWebpackPlugin.files[key]%>
      <%}%>
      我是分割线
      <% for(var key in htmlWebpackPlugin.options){%>
            <%= key%>:<%= htmlWebpackPlugin.options[key]%>
      <%}%>

    

多页面，生成多个html

plugins[]是数组形式，可以通过new很多个htmlWebpackPlugin对象来生成很多个html。
通过chunks或者excludechunks来制定需要加载的js
注意：
之前在html页面中有script标签中不能通过编码点的方式引入不是所有页面的chunk中共有的js文件，否则就会报错，即使注释掉也不行

var htmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
    entry:{
        main:'./src/script/main.js',
        a:'./src/script/a.js',
        b:'./src/script/b.js',
        c:'./src/script/c.js'
    },
    output:{
        path:'/Users/flyme/Documents/web/learn/learn_webpack/webpack-demo/dist',
        filename:'js/[name]-[chunkhash].js',
        publicPath:'http://cdn.com/'//引入js的默认路径，上线时很有用
    },
    plugins:[
        //多页面，好多个html
        new htmlWebpackPlugin({
            template:'index.html',
            filename:'a.html',
            inject:false,
            title:'this is a.html',
            //chunks:['main','a']//使用chunks一定注意了index.html中不能有script标签，注释掉都不行，会报错的
            excludeChunks:['b','c']//不需引入的js
        }),
        new htmlWebpackPlugin({
            template:'index.html',
            filename:'b.html',
            inject:false,
            title:'this is b.html',
            chunks:['b','main']//需要引入的js
        }),
        new htmlWebpackPlugin({
            template:'index.html',
            filename:'c.html',
            inject:false,
            title:'this is c.html',
            chunks:['c','main']
        })
    ]
}

若想通过提前加载一些js文件，减少固定请求，则需要在html模版中书写script标签，并在标签中导入默认加载的js文件（当然前提是所有页面的chunks里都得加载了此js文件，做的时候没有就一只报错，这是个坑），当然其他文件的应用就要排除这个默认引用的了，所以就把inject设置为false，使它不默认导入js，并在index.html模版中通过代码方式引入，代码如下：

    
    
    


        <% for(var k in htmlWebpackPlugin.files.chunks){%>
          <%if(k!=='main'){%>
              
          <%}%>
        <%}%>