1. 自动化生成项目中HTML页面（上）

    使用场景：webpack可以处理js文件，那html中引入的JS文件，如果使用hash值命名，每次打包不一致，可以使用html-webpack-plugin去动态生成html页面，起到每次更新JS导入的作用
    安装npm i html-webpack-plugin@3.0.7 —save-dev
    在webpack中使用插件，代码如下:

    1. var htmlWebpackPlugin = require("html-webpack-plugin");
    2. // 存在一个上下文就是根目录
    3. module.exports = {
    4.     entry: {
    5.         main: "./src/script/main.js",
    6.         a: "./src/script/a.js"
    7.     },//打包入口
    8.     output: {
    9.         path: "./dist",//打包之后文件的存放路径
    10.         filename: "js/[name]-[chunkhash].js"//打包之后的文件名
    11.     },
    12.     plugins:[
    13.         new htmlWebpackPlugin({
    14.             filename:"index-[hash].html",//html处理之后的文件名
    15.             template:'index.html',//以根目录下的index.html为模板
    16.             inject:"head"  //js文件在<head></head>引入，还是在<body></body>引入
    17.         })
    18.     ]
    19. }
    1. 自动化生成项目中HTML页面（中）
    • 调用htmlWebpackPlugin插件时，传入的模板(index.html)中，可以获取htmlWebpackPlugin的属性参数(备注：直接取值<%= %> 执行表达式：<% %>) ```javascript var htmlWebpackPlugin = require(“html-webpack-plugin”); // 存在一个上下文就是根目录 module.exports = { entry: { main: “./src/script/main.js”, a: “./src/script/a.js” },//打包入口 output: { path: “./dist”,//打包之后文件的存放路径 filename: “js/[name]-[chunkhash].js”//打包之后的文件名 }, plugins: [ new htmlWebpackPlugin({
      1. filename: "index.html",//html处理之后的文件名   index-[hash].html  此处的名字可以使用hash
      2. template: 'index.html',//以根目录下的index.html为模板
      3. inject: true, //js文件在<head></head>引入，还是在<body></body>引入
      4. title: "webpack is good",
      5. date: new Date()
      }) ] }
    1. ```html
    2. <!DOCTYPE html>
    3. <html lang="en">
    5. <head>
    6.     <meta charset="UTF-8">
    7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.     <title>
    10.         <%= htmlWebpackPlugin.options.title%>
    11.     </title>
    12.     <script src="bundle.js" type="text/javascript"></script>
    13. </head>
    14. <!-- 直接取值<%=  %>  执行表达式：<%  %> -->
    15. <body>
    16.     <% for(var key in htmlWebpackPlugin){%>
    17.       <%= key +":"+ JSON.stringify(htmlWebpackPlugin[key]) %>
    18.     <% } %>
    19. </body>
    21. </html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>
    9.         webpack is good
    10.     </title>
    11.     <script src="bundle.js" type="text/javascript"></script>
    12. <script type="text/javascript" src="js/main-2f0460e5ccb816026595.js"></script><script type="text/javascript" src="js/a-1ceb4b79e006a83c7f37.js"></script></head>
    14. <body>
    15.         files:{
    16.             "publicPath": "",
    17.             "chunks": {
    18.                 "main": {
    19.                     "size": 211,
    20.                     "entry": "js/main-2f0460e5ccb816026595.js",
    21.                     "hash": "2f0460e5ccb816026595",
    22.                     "css": []
    23.                 },
    24.                 "a": {
    25.                     "size": 177,
    26.                     "entry": "js/a-1ceb4b79e006a83c7f37.js",
    27.                     "hash": "1ceb4b79e006a83c7f37",
    28.                     "css": []
    29.                 }
    30.             },
    31.             "js": [
    32.                 "js/main-2f0460e5ccb816026595.js",
    33.                 "js/a-1ceb4b79e006a83c7f37.js"
    34.             ],
    35.             "css": []
    36.         }       
    37.         options:{
    38.             "template": "D:\\OpenSource\\webpack-demo\\node_modules\\html-webpack-plugin\\lib\\loader.js!D:\\OpenSource\\webpack-demo\\index.html",
    39.             "filename": "index.html",
    40.             "hash": false,
    41.             "inject": "head",
    42.             "compile": true,
    43.             "favicon": false,
    44.             "minify": false,
    45.             "cache": true,
    46.             "showErrors": true,
    47.             "chunks": "all",
    48.             "excludeChunks": [],
    49.             "title": "webpack is good",
    50.             "xhtml": false
    51.         }
    52. </body>
    54. </html>
    • 需求限定JS位置 ```javascript var htmlWebpackPlugin = require(“html-webpack-plugin”); // 存在一个上下文就是根目录 module.exports = { entry: {
      1.   main: "./src/script/main.js",
      2.   a: "./src/script/a.js"
      },//打包入口 output: {
      1.   path: "./dist",//打包之后文件的存放路径
      2.   filename: "js/[name]-[chunkhash].js"//打包之后的文件名
      }, plugins: [
      1.   new htmlWebpackPlugin({
      2.       filename: "index.html",//html处理之后的文件名   index-[hash].html  此处的名字可以使用hash
      3.       template: 'index.html',//以根目录下的index.html为模板
      4.       inject: false, //js文件在<head></head>引入，还是在<body></body>引入
      5.       title: "webpack is good",
      6.   })
      ] }
    1. ```html
    2. <!DOCTYPE html>
    3. <html lang="en">
    5.   <head>
    6.     <meta charset="UTF-8">
    7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.     <title>
    10.       <%=htmlWebpackPlugin.options.title%>
    11.         </title>
    12.       <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
    13.       </head>
    15.     <body>
    16.         <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.a.entry %>"></script>
    17.     </body>     
    18. </html>
    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>
    9.         webpack is good
    10.     </title>
    11.     <script type="text/javascript" src="js/main-2f0460e5ccb816026595.js"></script>
    12. </head>
    14. <body>
    15.       <script type="text/javascript" src="js/a-1ceb4b79e006a83c7f37.js"></script>
    16. </body>
    18. </html>
    • publicPath属性，发布到服务器之后的域名地址 ```javascript var htmlWebpackPlugin = require(“html-webpack-plugin”); // 存在一个上下文就是根目录 module.exports = { entry: { main: “./src/script/main.js”, a: “./src/script/a.js” },//打包入口 output: { path: “./dist”,//打包之后文件的存放路径 filename: “js/[name]-[chunkhash].js”,//打包之后的文件名 publicPath:”http://cdn.com"//发布服务器地址 }, plugins: [ new htmlWebpackPlugin({
      1. filename: "index.html",//html处理之后的文件名   index-[hash].html  此处的名字可以使用hash
      2. template: 'index.html',//以根目录下的index.html为模板
      3. inject: false, //js文件在<head></head>引入，还是在<body></body>引入
      4. title: "webpack is good",
      }) ] }
    1. ```javascript
    2. <!DOCTYPE html>
    3. <html lang="en">
    5. <head>
    6.     <meta charset="UTF-8">
    7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.     <title>
    10.         webpack is good
    11.     </title>
    12.     <script type="text/javascript" src="http://cdn.com/js/main-c87d8b38bcd1c10a0a9b.js"></script>
    13. </head>
    15. <body>
    16.     <script type="text/javascript" src="http://cdn.com/js/a-cbbbe45dd56850a7c396.js"></script>
    17. </body>
    19. </html>
    • index.html文件压缩,还有很多属性，自行上官网学习
      1. minify: {
      2. removeComments: true,//删除注释
      3. collapseWhitespace: true//去掉空格
      4.  }
      ```javascript var htmlWebpackPlugin = require(“html-webpack-plugin”); // 存在一个上下文就是根目录 module.exports = { entry: {
      1.   main: "./src/script/main.js",
      2.   a: "./src/script/a.js"
      },//打包入口 output: {
      1.   path: "./dist",//打包之后文件的存放路径
      2.   filename: "js/[name]-[chunkhash].js",//打包之后的文件名
      3.   publicPath: "http://cdn.com"//发布服务器地址
      }, plugins: [
      1.   new htmlWebpackPlugin({
      2.       filename: "index.html",//html处理之后的文件名   index-[hash].html  此处的名字可以使用hash
      3.       template: 'index.html',//以根目录下的index.html为模板
      4.       inject: false, //js文件在<head></head>引入，还是在<body></body>引入
      5.       title: "webpack is good",
      6.       date: new Date(),
      7.       minify: {
      8.           removeComments: true,//删除注释
      9.           collapseWhitespace: true//去掉空格
      10.       }
      11.   })
      ] }
    2. 3. 自动化生成项目中HTML页面（下）
    4. 处理多页面应用情况（添加多个htmlWebpackPlugin实例）：
    6. - chunks属性，页面导入指定JS
    7. - excludeChunks属性，除了指定的JS的，其它的JS都导入
    8. - htmlWebpackPlugin.files.chunks在html中获取的就是webpack.config.js指定的JS
    9. ```javascript
    11. let htmlWebpackPlugin = require("html-webpack-plugin");
    12. // 存在一个上下文就是根目录
    13. module.exports = {
    14.     entry: {
    15.         main: "./src/script/main.js",
    16.         a: "./src/script/a.js",
    17.         b: "./src/script/b.js",
    18.         c: "./src/script/c.js",
    19.     },//打包入口
    20.     output: {
    21.         path: "./dist",//打包之后文件的存放路径
    22.         filename: "js/[name]-[chunkhash].js",//打包之后的文件名
    23.         publicPath: "http://cdn.com"//发布服务器地址
    24.     },
    25.     plugins: [
    26.         new htmlWebpackPlugin({
    27.             filename: "a.html",//html处理之后的文件名   index-[hash].html  此处的名字可以使用hash
    28.             template: 'index.html',//以根目录下的index.html为模板
    29.             inject: "body", //js文件在<head></head>引入，还是在<body></body>引入
    30.             title: "This is a.html",
    31.             date: new Date(),
    32.             chunks:['main','a'],//导入main和a
    33.             minify: {
    34.                 removeComments: true,//删除注释
    35.                 collapseWhitespace: true//去掉空格
    36.             }
    37.         }),
    38.         new htmlWebpackPlugin({
    39.             filename: "b.html",//html处理之后的文件名   index-[hash].html  此处的名字可以使用hash
    40.             template: 'index.html',//以根目录下的index.html为模板
    41.             inject: "body", //js文件在<head></head>引入，还是在<body></body>引入
    42.             title: "This is b.html",
    43.             excludeChunks:['c','a'],//除了a，c都导入
    44.             date: new Date(),
    45.             minify: {
    46.                 removeComments: true,//删除注释
    47.                 collapseWhitespace: true//去掉空格
    48.             }
    49.         }),
    50.         new htmlWebpackPlugin({
    51.             filename: "c.html",//html处理之后的文件名   index-[hash].html  此处的名字可以使用hash
    52.             template: 'index.html',//以根目录下的index.html为模板
    53.             inject: "body", //js文件在<head></head>引入，还是在<body></body>引入
    54.             title: "This is c.html",
    55.             excludeChunks:['b','a'],//除了a，b都导入
    56.             date: new Date(),
    57.             minify: {
    58.                 removeComments: true,//删除注释
    59.                 collapseWhitespace: true//去掉空格
    60.             }
    61.         })
    63.     ]
    64. }

    注意：inject设定为head或者是body会加入页面所需js，false表示自定义

    • 导入初始化的main.js内容，不适用cdn（网络请求的方式加载）
      1. compilation.assets[htmlWebpackPlugin.files.chunks.main.entry
      2.        .substr(htmlWebpackPlugin.files.publicPath.length)]
      3.        .source()
      ```javascript

    let 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: “./dist”,//打包之后文件的存放路径 filename: “js/[name]-[chunkhash].js”,//打包之后的文件名 publicPath: “http://cdn.com"//发布服务器地址 }, plugins: [ new htmlWebpackPlugin({ filename: “a.html”,//html处理之后的文件名 index-[hash].html 此处的名字可以使用hash template: ‘index.html’,//以根目录下的index.html为模板 inject: false, //js文件在引入，还是在引入 title: “This is a.html”, date: new Date(), chunks: [‘main’, ‘a’],//导入main和a minify: { removeComments: true,//删除注释 collapseWhitespace: true//去掉空格 } }), new htmlWebpackPlugin({ filename: “b.html”,//html处理之后的文件名 index-[hash].html 此处的名字可以使用hash template: ‘index.html’,//以根目录下的index.html为模板 inject: false, //js文件在引入，还是在引入 title: “This is b.html”, excludeChunks: [‘c’, ‘a’],//除了a，c都导入 date: new Date(), minify: { removeComments: true,//删除注释 collapseWhitespace: true//去掉空格 } }), new htmlWebpackPlugin({ filename: “c.html”,//html处理之后的文件名 index-[hash].html 此处的名字可以使用hash template: ‘index.html’,//以根目录下的index.html为模板 inject: false, //js文件在引入，还是在引入
    title: “This is c.html”, excludeChunks: [‘b’, ‘a’],//除了a，b都导入 date: new Date(), minify: { removeComments: true,//删除注释 collapseWhitespace: true//去掉空格 } })

    1. ]

    }

    1. ```html
    2. <!--
    3. 模板html
    4. -->
    5. <!DOCTYPE html>
    6. <html lang="en">
    8.   <head>
    9.     <meta charset="UTF-8">
    10.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    11.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    12.     <title>
    13.       <%=htmlWebpackPlugin.options.title%>
    14.         </title>
    15.       <!-- 导入初始化JS，无需请求网络优化 -->
    16.       <%=
    17.          compilation.assets[htmlWebpackPlugin.files.chunks.main.entry
    18.          .substr(htmlWebpackPlugin.files.publicPath.length)]
    19.          .source() %>
    20.         </head>
    22.       <body>
    23.         <% for(var key in htmlWebpackPlugin.files.chunks){ %>
    24.           <% if(key != 'main' ){ %>
    25.               <script src="<%= htmlWebpackPlugin.files.chunks[key].entry %>" type="text/javascript"></script>
    26.           <% } %>
    27.          <% } %>
    28.        </body>       
    29. </html>