Webpack 构建项目（三）

第三节主要对应视频教程上，针对于html-webpack-plugin这个的详细讲解，对此做一下笔记。
先在webpack.config.js 声明一个变量。

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

然后就在plugins进行属性的设置 如title

plugins:[
    new htmlWebpackPlugin({
      filename:'index.html',
      template:'index.html',//此处可以指定一个路径 如  src/temp/index.html
      inject:'head',
      title:'webpack is bad', // title 属性
      date:new Date()   //date 属性
    })
  ]

接着就要在模板文件中使用这些属性。这种写法视频中提到的是模板文件的写法

（1）<%=  %> 直接取值
（2）<%   %> 运行JS代码

   
or
<%= htmlWebpackPlugin.options.date %>

接下来开始对htmlWebpackPlugin 中的属性进行遍历，查看我们能够从htmlWebpackPlugin取到的信息。

<% for (var key in htmlWebpackPlugin) {%>
      <%=key %>
<% } %>

最终生成 files、options 这两个结果。我们在继续对这两个Key进行遍历

<% for (var key in htmlWebpackPlugin.files) {%>
      <%=key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
 
<% } %>

<% for (var key in htmlWebpackPlugin.options) {%>
      <%=key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %>
<% } %>

结果如下所示 其中，对options的遍历结果中我们已经使用了其中的inject filename 等。更多的可以去官网看html-webpack-plugin options 属性详解

    
Hello World
    
Hello YYY
    Mon Dec 11 2017 22:36:03 GMT+0800 (CST)
    

      publicPath : ""
    
      chunks : {"main":{"size":27,"entry":"js/main.js","hash":"f0883f49cc458b4e9f68","css":[]},"a":{"size":20,"entry":"js/a.js","hash":"b132e09a19bc030c1a4a","css":[]}}
    
      js : ["js/main.js","js/a.js"]
    
      css : []
    
      manifest : 
    

    
      template : "/Users/wuxinbo/Desktop/前端/个人练习/WebpackDemo/muke-Webpack/node_modules/html-webpack-plugin/lib/loader.js!/Users/wuxinbo/Desktop/前端/个人练习/WebpackDemo/muke-Webpack/index.html"
    
      filename : "index.html"  
    
      hash : false
    
      inject : "head"
    
      compile : true
    
      favicon : false
    
      minify : false
    
      cache : true
    
      showErrors : true
    
      chunks : "all"
    
      excludeChunks : []
    
      title : "webpack is bad"
    
      xhtml : false
    
      date : "2017-12-11T14:36:03.540Z"
    
  

在得知这些属性后就可以进行使用，可以在模板文件中对打包好的文件进行引用。如下所示：

  
    
    
    
    
  
  
    
Hello World
    
Hello YYY
    <%= htmlWebpackPlugin.options.date %>
    
    

  

同时也需要对webpack.config.js中的 plugins的 inject属性进行设置，官网对inject描述：当inject的值为 true 或者'body' 时，所有JS源都会放置在body标签内，值为'head',就把所有JS源都放置在head标签内。如设置为false，则不对其进行定义。由于以上代码一个放进了head，一个放进了body，那么就需要设置为false.

关于pubulicPath 相当于一个占位符。当设置好参数后，使所有引用的相对路径变为绝对路径。

output:{
    path:path.resolve(__dirname,'dist'),
    filename:'js/[name].js',
    publicPath:'https://cdn.com/'
  }