webpack4的webpack-dev-server与html-webpack-plugin的使用

前面提到webpack一些基本的使用
初始化文件根目录(建包,npm init),本地安装webpack,webpack-cli
这时再有个入口文件,然后在控制台上输入命令(webpack)就可以打包了,
这是在没有配置文件的环境下,
当然有了配置文件就更好了,可以配置
出口文件,入口文件,模式(production/development)

但是呢这样每次修改了入口文件或者引入的文件都要在控制台重新输入一下命令
感觉有点麻烦,所以这时就安装一个webpack-dev-server的插件,

npm install webpack-dev-server -D

在package.json中修改scripts的dev为"webapack-dev-server"

 "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --port 3000 --contentbase src --hot"
    },
    

参数	作用
open	当入口文件更新时自动生成bundle.js文件后浏览器自动打开
port	设定访问的端口号
host
constbase	设http://host:port/请求后默认呈现项目根目录的index.htmll,此参数改变默认请求路径下的(index.html)
hot	热更新,正常情况下每改变一次都要重新生成完整bundle.js,而此时只需要重新生成更新的内容即可,并实现浏览器的无刷新 ,相当于ajax的效果

这时每当修改入口文件保存时就会自动修改打包后文件
(此时的打包后文件在内存中,不在磁盘上,在根目录下)===>/bundle.js
所以这时在index.html文件中引入的js文件的路径就要修改为/bundle.js

当然了js文件也可以不用引入前提是使用Html-webpack-plugin插件
可以使页面存在域内存中,内存中的页面会将磁盘上的页面拷贝一份到内存的页面中自动插入需要引入的bundle.js(所以不用手动引入)
首先安装

npm install html-webpack-plugin

在配置文件中引入

var htmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
	plugins:[
	new htmlWebpackPlugin({
	template:path.join(__dirname,"./src/index.html"),
	filename:"index.html"
})
]
}

总之作用
1.使项目在内存中存在一个文件
2.为在内存中的index.html自动引入bundle.js文件