接续上文：webpack前端构建工具学习总结（三）之webpack.config.js配置文件

插件的介绍文档：https://www.npmjs.com/package/html-webpack-plugin

1.安装html-webpack-plugin插件，输入命令：npm install html-webpack-plugin --save-dev

2.在webpack.config.js文件中，引入html-webpack-plugin插件

3.输入命令：npm run webpack，编译打包

可以看到在dist/js目录下新生成了一个index.html文件，并且引入了新编译生成的两个js，但此index.html与src文件夹下面的index.html并无关系

src下面的index.html如下

4.如果在此基础上编译生成新的html，需要配置webpack.config.js里面的html插件的参数

编译打包之后，dist下的文件目录如下：

编译生成的index.html文件如下

5.但我们在平时项目中，并不希望html文件与js文件在同一级目录下，修改webpack.config.js文件中的output属性值

输入命令：npm run webpack，编译打包后的目录为

6.html-webpack-plugin的files和options属性的介绍

7.项目上线输出时引用js等的路径不能是相对地址，应使用output里面的publicPath设置域名等绝对地址前缀

8.压缩html文件，使用html-webpack-plugin参数中的minify参数进行配置

参考文档：https://github.com/kangax/html-minifier#options-quick-reference

9.根据一个模板文件生成多个html页面，并且每个页面引用不同的js文件

var htmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin插件

module.exports = {

    entry: {//打包的入口文件chunk，可以是一个string字符串，也可以是一个数组，还可以是一个json对象

        hello: './src/script/hello.js',

        world: './src/script/world.js',

        good: './src/script/good.js'

    },

    output: {//打包完的输出文件

        path: './dist',//打包输出文件的目录

        filename: 'js/[name].js',//打包输出的文件名

        publicPath: 'http://www.a.com'//项目上线输出时引用js等的路径不能是相对地址，应使用output里面的publicPath设置域名等绝对地址前缀

    },

    plugins: [//插件

        //初始化html插件

        //生成多个html文件，需要初始化多个htmlWebpackPlugin插件

        new htmlWebpackPlugin({

            template: 'src/index.html',//模板

            filename: 'hello.html',//编译后的文件名

            inject: 'head',//想把脚本文件放在哪个标签内，head或者body

            // inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定

            title: 'this is hello.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中

            minify: {//压缩html

                collapseWhitespace: true,//去除空格

                removeComments: true //去除注释

            },

            chunks: ['hello']//引入entry里面的哪一个chunk

        }),

        new htmlWebpackPlugin({

            template: 'src/index.html',//模板

            filename: 'world.html',//编译后的文件名

            inject: 'head',//想把脚本文件放在哪个标签内，head或者body

            // inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定

            title: 'this is world.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中

            minify: {//压缩html

                collapseWhitespace: true,//去除空格

                removeComments: true //去除注释

            },

            chunks: ['world']//引入entry里面的哪一个chunk

        }),

        new htmlWebpackPlugin({

            template: 'src/index.html',//模板

            filename: 'good.html',//编译后的文件名

            inject: 'head',//想把脚本文件放在哪个标签内，head或者body

            // inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定

            title: 'this is good.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中

            minify: {//压缩html

                collapseWhitespace: true,//去除空格

                removeComments: true //去除注释

            },

            chunks: ['good']//引入entry里面的哪一个chunk

        })

    ]

}

webpack.config.js

运行之后的目录结构如下：

并且每一个html都引用了跟自己同名的js文件

10.目前生成的引用js文件都是通过src地址引入，这样会大大增加http的请求，我们通过官网提供的方法将公用的js文件进行解析插入到页面上

文档地址：https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade

//htmlWebpackPlugin.files.chunks.main.entry输出是带publicPath的，但compilation.assets方法需要的是相对路径，故需要substr截取，然后使用webpack提供的方法compilation.assets[].source()将这个文件的内容读出来嵌在页面head中

<!--引入除了main.js之外的需要引入的chunk文件-->
<!--<% %>为js的模板引擎的运行符，<%= %>则为js的模板引擎取值符-->

 <!DOCTYPE html>

 <html>

 <head>

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

     <script type="text/javascript">

         <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>

     </script>

 </head>

 <body>

     <% for(var k in htmlWebpackPlugin.files.chunks){ %>

         <% if(k !== 'main'){ %>

             <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>

         <% } %>

     <% } %>

     <div>我是body里面div的内容</div>

     <!--我是一行注释-->

 </body>

 </html>

模板html页面

var htmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin插件

module.exports = {

    entry: {//打包的入口文件chunk，可以是一个string字符串，也可以是一个数组，还可以是一个json对象

        hello: './src/script/hello.js',

        world: './src/script/world.js',

        good: './src/script/good.js',

        main: './src/script/main.js'//公用js

    },

    output: {//打包完的输出文件

        path: './dist',//打包输出文件的目录

        filename: 'js/[name].js',//打包输出的文件名

        publicPath: 'http://www.a.com'//项目上线输出时引用js等的路径不能是相对地址，应使用output里面的publicPath设置域名等绝对地址前缀

    },

    plugins: [//插件

        //初始化html插件

        //生成多个html文件，需要初始化多个htmlWebpackPlugin插件

        new htmlWebpackPlugin({

            template: 'src/index.html',//模板

            filename: 'hello.html',//编译后的文件名

            // inject: 'head',//想把脚本文件放在哪个标签内，head或者body

            inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定

            title: 'this is hello.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中

            // minify: {//压缩html

            //     collapseWhitespace: true,//去除空格

            //     removeComments: true //去除注释

            // },

            chunks: ['hello','main']//引入entry里面的哪一个chunk

        }),

        new htmlWebpackPlugin({

            template: 'src/index.html',//模板

            filename: 'world.html',//编译后的文件名

            // inject: 'head',//想把脚本文件放在哪个标签内，head或者body

            inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定

            title: 'this is world.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中

            // minify: {//压缩html

            //     collapseWhitespace: true,//去除空格

            //     removeComments: true //去除注释

            // },

            chunks: ['world','main']//引入entry里面的哪一个chunk

        }),

        new htmlWebpackPlugin({

            template: 'src/index.html',//模板

            filename: 'good.html',//编译后的文件名

            // inject: 'head',//想把脚本文件放在哪个标签内，head或者body

            inject: false,//不使用默认的将几个脚本放在一起，在模板html中单独设定

            title: 'this is good.html', //页面的title，模板html可以通过引用这个变量展示到新的页面中

            // minify: {//压缩html

            //     collapseWhitespace: true,//去除空格

            //     removeComments: true //去除注释

            // },

            chunks: ['good','main']//引入entry里面的哪一个chunk

        })

    ]

}

webpack.config.js

输入命令：npm run webpack，编译打包之后就可以看到每个html页面的头部嵌入了main.js打包后的内容，在body 内部根据不同的页面引入了不同的chunk的js文件

到这里，自动化生成项目中的html页面以及html-webpack-plugin插件的一些配置参数，html页面打包的一些点都get到了。

webpack前端构建工具学习总结（四）之自动化生成项目中的html页面的更多相关文章

  1. webpack前端构建工具学习总结（一）之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  2. webpack前端构建工具学习总结（二）之loader的使用

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...

  3. webpack前端构建工具学习总结（三）之webpack.config.js配置文件

    Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...

  4. Spring学习（四）在Web项目中实例化IOC容器

    1.前言 前面我们讲到Spring在普通JAVA项目中的一些使用.本文将介绍在普通的Web项目中如何实例化Spring IOC容器.按照一般的思路.如果在Web中实例化Ioc容器.这不得获取Conte ...

  5. gulp 前端构建工具使用

    gulp 前端构建工具使用 1.新建一个web  h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...

  6. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  7. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  8. 前端构建工具gulp使用 (转）

    http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...

  9. Gulp， 比Grunt更好用的前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...

随机推荐

  1. bzoj5117

    线段树 先看前三个操作,都是区间修改,我们对于信息维护一个二元组(a,b),表示x=max(x+a,b),那么第一个操作就是(a,-inf),第二个是(-a,0),第三个是(-inf,a) 然后看查询 ...

  2. 搭建Linux的VMware Workstation Pro

    搭建准备环境: 1.win10操作系统: 2.VMware Workstation Pro12: 下载地址   http://www.vmware.com/products/workstation/w ...

  3. 1 python----pycharm本地部署spark

    下图相关工具连接 链接:https://pan.baidu.com/s/115XWf_Fc1yMiJytKJQXnFQ   密码:3jvr 好了,加油哟!

  4. 3、webpack打包出的文件解析

    分析打包后的结果,看看打包后的结果是什么东西 把打包后的结果.注释什么的删删‘’ 当前是一个匿名函数. 默认的时候会执行,执行的时候会传一个对象,对象有几部分,第一部分是我们的key.第二部分是我们的 ...

  5. 2016CCPC东北地区大学生程序设计竞赛【01/03/05/06/08】

    吧啦啦啦啦啦啦啦啦啦啦啦能量,ACM,跨!变身!变成一个智障! 04正在酝酿中!!!马上更新!!!!!  01题意:有一个n个点的图,对于任意两个不同的点,他的权值是两个点下标的最小公倍数,求最小生出 ...

  6. Unity json

    MiniJSON.cs using UnityEngine; using System; using System.Collections; using System.Collections.Gene ...

  7. unity 在移动平台中,文件操作路径详解

    今天,这篇文章其实是个老生常谈的问题咯,在网上类似的文章也比比皆是,在此我只是做个详细总结方便大家能够更好.更快的掌握,当然,如有不足的地方 欢迎指正!!! 相信大家在开发过程中,难免会保存一些文件在 ...

  8. MongoDb Samus 驱动的改进

    一直使用 MongoDb 的 Samus C#驱动. 其有一个缺陷,就是无法支持struct的读写. 但是一般数据都用Class包装,所以也没有太在意. 随着这些天尝试写入 KLineData 时,遇 ...

  9. TyvjP1863 [Poetize I]黑魔法师之门（2014-8-27）

    P1863 [Poetize I]黑魔法师之门 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 经过了16个工作日的紧张忙碌,未来的人类终于收集到了足够的能源 ...

  10. [Xcode 实际操作]九、实用进阶-(31)为IAP(支付方式)内购功能的具体实现和测试

    目录:[Swift]Xcode实际操作 本文将演示如何为IAP(支付方式)内购功能的具体实现和测试. 内购是苹果市场上的一种常见的盈利方式. 在项目中确保已经安装了第三方库[Pod],双击[Podfi ...