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

[js高手之路]深入浅出webpack教程系列索引目录：

上文我们讲到了options的配置和获取数据的方式，本文，我们继续深入options的配置

一、html-webpack-plugin插件中的options除了自己定义了一些基本配置外，我们是可以任意的添加自定义的数据

webpack.dev.config.js文件:

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

 module.exports = {

     entry : {

         main : './src/js/main.js',

         calc : './src/js/calc.js'

     },

     output : {

         //__dirname，就是当前webpack.config.js文件所在的绝对路径

         path : __dirname + '/dist', //输出路径，要用绝对路径

         filename : 'js/[name]-[hash].bundle.js' //打包之后输出的文件名

     },

     plugins: [

         new HtmlWebpackPlugin({

             template : './index.html',

             title : 'ghostwu教你学webpack',

             inject : true,

             date : new Date(),

             userName : 'ghostwu',

             age : 22

         })

     ]

 };

我们在webpack.dev.config.js中新增了3个自定义数据( date,userName, age)，我们在demo2目录下面的index.html模板中可以这样读取

 <h3><%= htmlWebpackPlugin.options.date %></h3>

 <h3><%= htmlWebpackPlugin.options.userName %></h3>

 <h3><%= htmlWebpackPlugin.options.age %></h3>

同样设置好了之后，记得( npm run d )重新打包生成.

二、完整的把htmlWebpackPlugin这个实例在模板中遍历出来

demo2下面的index.html文件:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title><%= htmlWebpackPlugin.options.title %></title>

 <body>

     <h3><%= htmlWebpackPlugin.options.date %></h3>

     <h3><%= htmlWebpackPlugin.options.userName %></h3>

     <h3><%= htmlWebpackPlugin.options.age %></h3>

     <ul>

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

             <% if ( key == 'files' ) { %>

                 <h3>files</h3>

                 <% for( var f in htmlWebpackPlugin[key] ){ %>

                     <li> <%= f %>, <%= htmlWebpackPlugin[key][f] %> </li>

                     <% if ( f == 'chunks') { %>

                         <p><%= JSON.stringify( htmlWebpackPlugin[key][f] ) %></p>

                     <% } %>

                 <% } %>

             <% } else { %>

                 <h3>options</h3>

                 <% for( var f in htmlWebpackPlugin[key] ){ %>

                     <li> <%= f %>, <%= htmlWebpackPlugin[key][f] %> </li>

                 <% } %>

             <% } %>

         <% } %>

     </ul>

 </body>

 </html>

三，通过上面打印的数据，我们可以自己手动指定js文件的引入，不需要自动inject

webpack.dev.config.js文件

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

 module.exports = {

     entry : {

         main : './src/js/main.js',

         calc : './src/js/calc.js'

     },

     output : {

         //__dirname，就是当前webpack.config.js文件所在的绝对路径

         path : __dirname + '/dist', //输出路径，要用绝对路径

         filename : 'js/[name]-[hash].bundle.js' //打包之后输出的文件名

     },

     plugins: [

         new HtmlWebpackPlugin({

             template : './index.html',

             title : 'ghostwu教你学webpack',

             inject : false

         })

     ]

 };

inject设置为false, js不会自动注入到打包之后的文件dist/index.html，所以我们就要自动指定加载的js文件.

demo2/index.html文件代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title><%= htmlWebpackPlugin.options.title %></title>

     <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>

 <body>

     <script src="<%= htmlWebpackPlugin.files.chunks.calc.entry %>"></script>

 </body>

 </html>

执行打包命令( npm run d ),在dist目录下生成的index.html文件，源代码就变成我们手动注入的js文件了

四、minify选项，压缩html文件

他可以配置很多的值，官方参考地址：https://github.com/kangax/html-minifier#options-quick-reference

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

 module.exports = {

     entry : {

         main : './src/js/main.js',

         calc : './src/js/calc.js'

     },

     output : {

         //__dirname，就是当前webpack.config.js文件所在的绝对路径

         path : __dirname + '/dist', //输出路径，要用绝对路径

         filename : 'js/[name]-[hash].bundle.js', //打包之后输出的文件名

     },

     plugins: [

         new HtmlWebpackPlugin({

             template : './index.html',

             title : 'ghostwu教你学webpack',

             inject : false,

             minify : {

                 removeComments : true, //去掉注释

                 collapseWhitespace : true, //去掉空行

             }

         })

     ]

 };

这里，我们配置了两种常用的压缩选项( 去掉注释，去掉空行），那么打包生成的index.html文件，就会变成压缩版（比如你看到的jquery.min.js这样的文件，都是经过压缩处理的）

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)的更多相关文章

[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他 ...
[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...
[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entr ...
[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loade ...
[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在we ...
[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...
[js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
[js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...

随机推荐

使用gitLab 或 github 关联本地仓库
要先在git里面注册自己的邮箱然后: git commit -m 是为本次提交命名刷新gitLab 发现更新了
easyAR图钉功能实现相关
图钉功能总算做出来了,发现真的是因为没认真看手册导致的=.=[跪最后的代码很简单,但是过程中看了不少camera/tracker相关的东西,感觉需要整理记录一下图钉功能记录: 目标:实现用ARCa ...
gitlab和github一起使用
还是在转我笔记上的内容, 也算备份参考(https://segmentfault.com/a/1190000002994742) 可以对比着看, 我记得参考里面有个点没有说详细, 我把自己的流程记下 ...
[补档]从OI学麻将
背景作为一名川娃子,怎么能不懂麻将呢= = T1 さきなに~~ [咲 -Saki-] 天才麻将少女什么编题目二十一世纪,世界上的麻将竞技人数超过一亿,日本每年也有大规模的全国大赛来对麻将选手进行 ...
suffix tree
文章出处:http://www.cnblogs.com/snowberg/archive/2011/10/21/2468588.html 3 What is a Suffix Tree Suf ...
HTML的正确入门姿势——基本结构与基本标签
一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML文档的结构 HTML文档主要包括三大部分:文档声明部分.<head>头部部 ...
甲方VS乙方
甲方与乙方,在很多人都存在有误解,不知道究竟如何辨别.这里我提一些简单的辨别方式:甲方一般是指提出目标的一方,在合同拟订过程中主要是提出要实现什么目标,乙方一般是指完成目标,在合同中主要是提出如何保证 ...
vue.js初探：计算属性和methods
在vue.js中,计算属性和methods方法的函数相同时,两者的最终执行结果都是相同的.然而不同的是,计算属性是基于它的依赖缓存.计算属性只有在它的相关依赖发生改变时才会重新取值.这就意味着只要 m ...
关于HTML应用中的实操细节
在编写HTML程序时,初阶段在打编码时容易忽视语法方面的问题,如大小写,中英文切换标点等.正常在编码时出现语法问题自己很难发现,所以刚开始练习特别要注重语法方面的规范,另外在编码时要有规范的书写方式, ...
程序设计中的数学思维函数总结（代码以C#为例）
最近以C#为例,学习了程序设计基础,其中涉及到一些数学思维,我们可以巧妙的将这些逻辑问题转换为代码,交给计算机运算. 现将经常会使用到的基础函数做一总结,供大家分享.自己备用. 1.判断一个数是否为奇 ...

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

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)的更多相关文章

随机推荐

热门专题