配置 html-webpack-plugin 生成預(yù)覽頁面

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

// 導(dǎo)入生成預(yù)覽頁面的插件，得到一個構(gòu)造函數(shù)

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

const htmlPlugin = new HtmlWebpackPlugin({ // 創(chuàng)建插件的實(shí)例對象

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

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

})

③ 修改 webpack.config.js 文件中向外暴露的配置對象，新增如下配置節(jié)點(diǎn)：

module.exports = {

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

}

---

---

---

配置自動打包相關(guān)的參數(shù)

// package.json中的配置

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

// --host 配置 IP 地址

// --port 配置端口

"scripts": {

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

},

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。