配置 html-webpack-plugin 生成預覽頁面

① 運行 npm install html-webpack-plugin –D 命令，安裝生成預覽頁面的插件 ② 修改 webpack.config.js 文件頭部區域，添加如下配置信息：

// 導入生成預覽頁面的插件，得到一個構造函數

const HtmlWebpackPlugin = require('html-webpack-plugin')

const htmlPlugin = new HtmlWebpackPlugin({ // 創建插件的實例對象

? ? template: './src/index.html', // 指定要用到的模板文件

? ? filename: 'index.html' // 指定生成的文件的名稱，該文件存在于內存中，在目錄中不顯示

})

③ 修改 webpack.config.js 文件中向外暴露的配置對象，新增如下配置節點：

module.exports = {

? ? plugins: [ htmlPlugin ] // plugins 數組是 webpack 打包期間會用到的一些插件列表

}

---

---

---

配置自動打包相關的參數

// package.json中的配置

// --open 打包完成后自動打開瀏覽器頁面

// --host 配置 IP 地址

// --port 配置端口

"scripts": {

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"

},

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的配置 html-webpack-plugin 生成预览页面||配置自动打包相关的参数的全部內容，希望文章能夠幫你解決所遇到的問題。

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