[js高手之路]深刻淺出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

[js高手之路]深刻淺出webpack教程系列索引目錄:css

上文咱們對html-webpack-plugin的實例htmlWebpackPlugin進行了遍歷分析,講解了幾個經常使用屬性( inject, minify )以及自定義屬性的添加,本文,咱們繼續深刻他的配置選項的探討.html

1、chunks選項前端

這個屬性很是有用,能夠指定某個頁面加載哪些chunk( 如:js文件 )webpack

咱們能夠用他作多個頁面模板的生成. 好比,咱們在實際開發中,作一個博客網站,通常來講有首頁,文章列表頁,文章詳情頁等等,這些頁面都有一個特色,都要引入一些公共的js文件以及該頁面特有的js文件,好比:git

首頁( index.html ) 引入  main.js, index.jsgithub

文章列表頁( list.html ) 引入  main.js, list.jsweb

文章詳情頁( detail.html ) 引入  main.js, detail.jsnpm

傳統方式,一個個的打開文件,拷貝修改,若是後期維護,又是一堆文件中,查找,拷貝,修改。很容易出錯,並且效率低下,咱們看下webpack是如何提升效率,開啓前端工業化開發革命道路babel

webpack.dev.config.js文件代碼: less

 1 var HtmlWebpackPlugin = require('html-webpack-plugin');
 2 module.exports = {
 3     entry : {
 4         main : './src/js/main.js',
 5         index : './src/js/index.js',
 6         list : './src/js/list.js',
 7         detail : './src/js/detail.js'
 8     },
 9     output : {
10         //__dirname,就是當前webpack.config.js文件所在的絕對路徑
11         path : __dirname + '/dist', //輸出路徑,要用絕對路徑
12         filename : 'js/[name]-[hash].bundle.js', //打包以後輸出的文件名
13     },
14     plugins: [
15         new HtmlWebpackPlugin({
16             template : './index.html',
17             title : '博客首頁-by ghostwu',
18             filename : 'index.html',
19             inject : true,
20             chunks : ['main', 'index']
21         }),
22         new HtmlWebpackPlugin({
23             template : './index.html',
24             title : '列表頁-by ghostwu',
25             filename : 'list.html',
26             inject : true,
27             chunks : ['main', 'list']
28         }),
29         new HtmlWebpackPlugin({
30             template : './index.html',
31             title : '文章詳情頁-by ghostwu',
32             filename : 'detail.html',
33             inject : true,
34             chunks : ['main', 'detail']
35         })
36     ]
37 };

而後在src的js目錄下面,建立main.js, index.js,list.js,detail.js文件,執行打包( npm run d )就會在dist下面生成3個文件,各自引入到各自的js文件,下次要維護的時候,只要修改這個配置文件,再次打包就能夠了,是否是很方便

2、excludeChunks選項

 這個很好理解,就是有不少chunks,排除不要加載的

webpack.dev.config.js文件代碼:

 1 var HtmlWebpackPlugin = require('html-webpack-plugin');
 2 module.exports = {
 3     entry : {
 4         main : './src/js/main.js',
 5         index : './src/js/index.js',
 6         list : './src/js/list.js',
 7         detail : './src/js/detail.js'
 8     },
 9     output : {
10         //__dirname,就是當前webpack.config.js文件所在的絕對路徑
11         path : __dirname + '/dist', //輸出路徑,要用絕對路徑
12         filename : 'js/[name]-[hash].bundle.js', //打包以後輸出的文件名
13     },
14     plugins: [
15         new HtmlWebpackPlugin({
16             template : './index.html',
17             title : '博客首頁-by ghostwu',
18             filename : 'index.html',
19             inject : true,
20             excludeChunks : ['list','detail']
21         }),
22         new HtmlWebpackPlugin({
23             template : './index.html',
24             title : '列表頁-by ghostwu',
25             filename : 'list.html',
26             inject : true,
27             excludeChunks : ['index','detail']
28         }),
29         new HtmlWebpackPlugin({
30             template : './index.html',
31             title : '文章詳情頁-by ghostwu',
32             filename : 'detail.html',
33             inject : true,
34             excludeChunks : ['list','index']
35         })
36     ]
37 };

把配置文件修改以後,再用npm run d執行一次打包,跟使用chunks的效果是同樣的

 三,把頁面src引入文件的方式,改爲用script標籤嵌入的方式,減小http請求( 提升加載性能)

要達到這個目的,咱們再安裝一個插件html-webpack-inline-source-plugin

安裝:npm install --save-dev html-webpack-inline-source-plugin

webpack.dev.config.js文件代碼:

 1 var HtmlWebpackPlugin = require('html-webpack-plugin');
 2 var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
 3 module.exports = {
 4     entry : {
 5         main : './src/js/main.js',
 6         index : './src/js/index.js',
 7         list : './src/js/list.js',
 8         detail : './src/js/detail.js'
 9     },
10     output : {
11         //__dirname,就是當前webpack.config.js文件所在的絕對路徑
12         path : __dirname + '/dist', //輸出路徑,要用絕對路徑
13         filename : 'js/[name]-[hash].bundle.js', //打包以後輸出的文件名
14     },
15     plugins: [
16         new HtmlWebpackPlugin({
17             template : './index.html',
18             title : '博客首頁-by ghostwu',
19             filename : 'index.html',
20             inject : true,
21             excludeChunks : ['list','detail'],
22             inlineSource : '.(js|css)$' //所有內嵌
23         }),
24         new HtmlWebpackInlineSourcePlugin(),
25         new HtmlWebpackPlugin({
26             template : './index.html',
27             title : '列表頁-by ghostwu',
28             filename : 'list.html',
29             inject : true,
30             excludeChunks : ['index','detail']
31         }),
32         new HtmlWebpackPlugin({
33             template : './index.html',
34             title : '文章詳情頁-by ghostwu',
35             filename : 'detail.html',
36             inject : true,
37             excludeChunks : ['list','index']
38         })
39     ]
40 };

執行npm run d打包命令以後,就會把dist/index.html文件的js和css改爲內嵌方式

相關文章
相關標籤/搜索