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

时间 2020-08-18

标签 webpack 前端构建工具学习总结自动化生成项目 html 页面栏目测试自动化繁體版

原文原文链接

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

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

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

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

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

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

src下面的index.html以下git

4.若是在此基础上编译生成新的html，须要配置webpack.config.js里面的html插件的参数github

编译打包以后，dist下的文件目录以下：web

编译生成的index.html文件以下npm

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

输入命令：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中

 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到了。