时间戳

首页 > 技术文章 > webpack前端构建工具学习总结（四）之自动化生成项目中的html页面

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

eyunhua 2017-03-05 22:59 原文

接续上文：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的模板引擎取值符-->

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title><%= htmlWebpackPlugin.options.title %></title>
 5     <script type="text/javascript">
 6         <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>
 7     </script>
 8 </head>
 9 <body>
10     <% for(var k in htmlWebpackPlugin.files.chunks){ %>
11         <% if(k !== 'main'){ %>
12             <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>
13         <% } %>
14     <% } %>
15     <div>我是body里面div的内容</div>
16     <!--我是一行注释-->
17 </body>
18 </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到了。 

推荐阅读