[js高手之路]深刻淺出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

時間 2019-11-13

標籤高手之路深刻 webpack 教程系列插件使用 html plugin 配置欄目 JavaScript 简体版

原文原文鏈接

[js高手之路]深刻淺出webpack教程系列索引目錄：css

上文咱們講到了options的配置和獲取數據的方式，本文，咱們繼續深刻options的配置html

1、html-webpack-plugin插件中的options除了本身定義了一些基本配置外，咱們是能夠任意的添加自定義的數據jquery

webpack.dev.config.js文件:webpack

 1 var HtmlWebpackPlugin = require('html-webpack-plugin');
 2 module.exports = {
 3     entry : {
 4         main : './src/js/main.js',
 5         calc : './src/js/calc.js'
 6     },
 7     output : {
 8         //__dirname，就是當前webpack.config.js文件所在的絕對路徑
 9         path : __dirname + '/dist', //輸出路徑，要用絕對路徑
10         filename : 'js/[name]-[hash].bundle.js' //打包以後輸出的文件名
11     },
12     plugins: [
13         new HtmlWebpackPlugin({
14             template : './index.html',
15             title : 'ghostwu教你學webpack',
16             inject : true,
17             date : new Date(),
18             userName : 'ghostwu',
19             age : 22
20         })
21     ]
22 };

咱們在webpack.dev.config.js中新增了3個自定義數據( date,userName, age)，咱們在demo2目錄下面的index.html模板中能夠這樣讀取git

1 <h3><%= htmlWebpackPlugin.options.date %></h3>
2 <h3><%= htmlWebpackPlugin.options.userName %></h3>
3 <h3><%= htmlWebpackPlugin.options.age %></h3>

一樣設置好了以後，記得( npm run d )從新打包生成.github

2、完整的把htmlWebpackPlugin這個實例在模板中遍歷出來web

demo2下面的index.html文件:npm

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title><%= htmlWebpackPlugin.options.title %></title>
 8 <body>
 9     <h3><%= htmlWebpackPlugin.options.date %></h3>
10     <h3><%= htmlWebpackPlugin.options.userName %></h3>
11     <h3><%= htmlWebpackPlugin.options.age %></h3>
12     <ul>
13         <% for ( var key in htmlWebpackPlugin ){ %>
14             <% if ( key == 'files' ) { %>
15                 <h3>files</h3>
16                 <% for( var f in htmlWebpackPlugin[key] ){ %>
17                     <li> <%= f %>, <%= htmlWebpackPlugin[key][f] %> </li>
18                     <% if ( f == 'chunks') { %>
19                         <p><%= JSON.stringify( htmlWebpackPlugin[key][f] ) %></p>
20                     <% } %>
21                 <% } %>
22             <% } else { %>
23                 <h3>options</h3>
24                 <% for( var f in htmlWebpackPlugin[key] ){ %>
25                     <li> <%= f %>, <%= htmlWebpackPlugin[key][f] %> </li>
26                 <% } %>
27             <% } %>
28         <% } %>
29     </ul>
30 </body>
31 </html>

三，經過上面打印的數據，咱們能夠本身手動指定js文件的引入，不須要自動injectbabel

webpack.dev.config.js文件less

 1 var HtmlWebpackPlugin = require('html-webpack-plugin');
 2 module.exports = {
 3     entry : {
 4         main : './src/js/main.js',
 5         calc : './src/js/calc.js'
 6     },
 7     output : {
 8         //__dirname，就是當前webpack.config.js文件所在的絕對路徑
 9         path : __dirname + '/dist', //輸出路徑，要用絕對路徑
10         filename : 'js/[name]-[hash].bundle.js' //打包以後輸出的文件名
11     },
12     plugins: [
13         new HtmlWebpackPlugin({
14             template : './index.html',
15             title : 'ghostwu教你學webpack',
16             inject : false
17         })
18     ]
19 };

inject設置爲false, js不會自動注入到打包以後的文件dist/index.html，因此咱們就要自動指定加載的js文件.

demo2/index.html文件代碼：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title><%= htmlWebpackPlugin.options.title %></title>
 8     <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
 9 <body>
10     <script src="<%= htmlWebpackPlugin.files.chunks.calc.entry %>"></script>
11 </body>
12 </html>

執行打包命令( npm run d ),在dist目錄下生成的index.html文件，源代碼就變成咱們手動注入的js文件了

4、minify選項，壓縮html文件

他能夠配置不少的值，官方參考地址：https://github.com/kangax/html-minifier#options-quick-reference

 1 var HtmlWebpackPlugin = require('html-webpack-plugin');
 2 module.exports = {
 3     entry : {
 4         main : './src/js/main.js',
 5         calc : './src/js/calc.js'
 6     },
 7     output : {
 8         //__dirname，就是當前webpack.config.js文件所在的絕對路徑
 9         path : __dirname + '/dist', //輸出路徑，要用絕對路徑
10         filename : 'js/[name]-[hash].bundle.js', //打包以後輸出的文件名
11     },
12     plugins: [
13         new HtmlWebpackPlugin({
14             template : './index.html',
15             title : 'ghostwu教你學webpack',
16             inject : false,
17             minify : {
18                 removeComments : true, //去掉註釋
19                 collapseWhitespace : true, //去掉空行
20             }
21         })
22     ]
23 };