本篇在webpack-dev-server的使用的基礎(chǔ)上
html-webpack-plugin
html-webpack-plugin是一個(gè)把頁面生成在內(nèi)存中的插件柒桑，本頁面保存在內(nèi)存中肯适，效率遠(yuǎn)高于保存在磁盤中
html-webpack-plugin使用
安裝
cnpm i html-webpack-plugin -D
在webpack.config.js中導(dǎo)入使用插件
導(dǎo)入插件
const HtmlWebPackPlugin = require('html-webpack-plugin');
創(chuàng)建對(duì)象
const htmlPlugin = new HtmlWebPackPlugin({
template:path.join(_dirname,'./src/index.html'),//源文件
filename:'index.html'//生成的內(nèi)存中的首頁名稱
})
在mode里引用
plugins:[
htmlPlugin
]
如下
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//導(dǎo)入 在內(nèi)存中自動(dòng)生成index頁面的插件
//創(chuàng)建一個(gè)插件的實(shí)例對(duì)象
const htmlPlugin = new HtmlWebPackPlugin({
template:path.join(__dirname,'./src/index.html'),//源文件
filename:'index.html'//生成的內(nèi)存中的首頁名稱
})
module.exports = {
mode:'development', //development開發(fā)怒炸。production 發(fā)布
plugins:[
htmlPlugin
]
}
結(jié)果運(yùn)行時(shí)報(bào)錯(cuò)
image.png
是由于webpack全局安裝所致，改為局部安裝即可
cnpm install webpack --save-dev
