tml-webpack-plugin是導入在內存中生成 HTML 頁面的 插件。
作用：
1.自動在內存中，根據指定的模板頁面，生成一份內存中的首頁，同時自動把打包好的bundle注入到頁面底部
2. 自動，把打包好的 bundle.js 追加到頁面中去
使用cnpm i html-webpack-plugin -D命令 安裝

注：
只要是插件，都一定要放到 plugins 節點中取

webpack.config.js文件

const path = require('path') const webpack = require('webpack');var htmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: path.join(__dirname, './src/main.js'),output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' },devServer: { open: true, port: 3000, contentBase: 'src', hot: true },plugins: [ new webpack.HotModuleReplacementPlugin(), new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'), // 指定模板文件路徑filename: 'index.html' // 設置生成的內存頁面的名稱})] }

使用 npm run dev 命令運行項目

注：
如果沒有安裝 cnpm
輸入 npm install -g cnpm --registry=https://registry.npm.taobao.org 命令安裝

總結

以上是生活随笔為你收集整理的Node.js html-webpack-plugin的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。