plugin -- HtmlWebpackPlugin · 前端工程化學習筆記

>[success] # HtmlWebpackPlugin 1. `webpack`打包生成**css js 等文件**，但是打包后的`html`頁面文件是沒有，每次一都需要手動去寫 `html `頁面并且將打包好的文件引入到手的編寫的 `html `中 2. `html-webpack-plugin` 這個插件會將你配置的模板頁面，在打包的時候一并生成一個`html `頁面，并且將**對應的css和js自動引入** 3. 安裝 `npm install html-webpack-plugin -D` >[danger] ##### 兩種模板使用方式 1. 如果沒有自定義 `html` 模板，就會使用插件自己內部的默認模板，在`html-webpack-plugin`的源碼中，有一個`default_index.ejs`模塊，語法`<% 變量 %>`，這個是`EJS`模塊填充數據的方式 ~~~html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body> </html> ~~~ * 配置中`title `可以寫入 `htmlWebpackPlugin.options.title` ![](https://img.kancloud.cn/84/fa/84faa446120afb26d8e67d3eaf46a3a1_791x395.png) ![](https://img.kancloud.cn/74/36/74364e5eb623bc0233ef5688f5b12542_993x258.png) 2. 想自己自定義 `html` 模板，就需要使用`template`指定我們要使用的模塊所在的路徑 ~~~ const HtmlWebpackPlugin = require('html-webpack-plugin') module.export = { plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname,'src/search.html'), // 使用模板 filename: 'search.html', // 打包后的文件名 title: 'Webpack Plugin Sample', // 設置html標題 meta: { // 設置對象中的元數據標簽 viewport: 'width=device-width' }, }), ] } ~~~ >[info] ## 4.x 說明說明如果你是`webpack4.x` 版本并且運行時候提示`Cannot read property 'tap' of undefined`,將`HtmlWebpackPlugin` 降級到`4.x`版本就好了