接續上文：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 }) ] }
運行之后的目錄結構如下：
並且每一個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>
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 }) ] }
輸入命令：npm run webpack，編譯打包之后就可以看到每個html頁面的頭部嵌入了main.js打包后的內容，在body 內部根據不同的頁面引入了不同的chunk的js文件
到這里，自動化生成項目中的html頁面以及html-webpack-plugin插件的一些配置參數，html頁面打包的一些點都get到了。