接续上文：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. Java创建对象解释

    创建对象包括两个步骤,首先为对象声明,然后为对象分配内存. (1)对象声明 格式:类名 对象名: 这里只是声明了对象,但该对象并不能够使用,原因为未分配内存空间. (2)为对象分配内存 格式:new ...

  2. sort()的升降序函数操作

    sort()函数包含在头文件#include <algorithm>中,是常用的排序函数. functional提供了一堆基于模板的比较函数对象.它们是:equal_to<Type& ...

  3. as3杂记

    一.内存回收方式: 1.引用计数[没有互相引用] 2.标记清除[fp自己检测是否引用,没有引用的清除] 二.通信方式: 1.http:小型页游[charles抓包查看] 2.socket:大型页游[W ...

  4. ObjectArx 中反应器Reactor的使用

    反应器类派生于AcRxObject而不是AcDbObject,因为他们不是数据库对象,没有ID,拥有关系也不适用. 不同类型的反应器接收不同类型的通知事件.派生于AcDbDatabaseReactor ...

  5. hdoj 1588 学好线代与数学

    按部就班,超级简单,虽然不是一次过的...错在那个long long数据问题还是要注意..也不知道要怎么注意:还是说题目吧... 思路看main函数 其他函数功能也是非常有用!代码比较丑...见谅 # ...

  6. 如何将含有byte数据项的结构存入MongoDb

    我们知道MongoDb不支持byte(BsonType中根本没有定义byte), 但是在实际生产环境中数据结构(特别是远古时代的数据结构)往往包含byte数据项. 这时候无法保存原有的数据结构,一般会 ...

  7. bzoj 2406: 矩阵【二分+有源汇上下界可行流】

    最大值最小,所以考虑二分 |Σaij-Σbij|<=mid,所以Σbij的上下界就是(Σaij-mid,Σaij+mid) 考虑建有上下界网络,连接(s,i,Σaik-mid,Σaik+mid) ...

  8. [Swift]堆栈Stack：检索最小元素时间复杂度O(1)

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. -webkit-line-clamp 兼容性问题

    1.一般情况下,想要实现文本超过几行后显示省略号的css. color: #101010; font-size: 14px; text-align: justify; font-family: Sou ...

  10. 解决IIS中运行TopJUI左侧菜单不显示的问题

    TopJUI演示系统中,模拟数据保存在.json文件中,目前发现有部分用户的IIS容器默认情况下是不支持.json文件的请求的,因此需要配置一下,可参考下文配置解决: 一.IIS 6 1． MIME设 ...