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
        })
    ]
}