1、webpack-dev-server
该插件的作用类似于热更新,在不手动打包的情况下可以自动监控代码的改变。
- 安装
npm install webpack-dev-server@3.11.2 -D - 配置
在package.json中添加新的脚本devs
"scripts": {
"devs": "webpack serve",
"dev": "webpack"
},
-
运行
npm run devs -
原理
使用webpack-dev-server打包时会启动一个http服务器,默认端口是8080。
同时此时生成的main.js文件并没有放在物理磁盘上,而是放在内存中。
所以在html界面中使用的js文件应该是内存中的main.js。
错误引用:磁盘中的main.js
<script src="../dist/main.js"></script>
正确引用:内存的main.js
<script src="/main.js"></script>
2、html-webpack-plugin
在使用了webpack-dev-server后运行项目会启动一个http服务,端口是8080.但是进入服务后显示的是项目的目录结构,这不是我想看到的,此时可以使用html-webpack-plugin插件让服务的默认界面为html界面。
- 使用插件之前的localhost:8080界面:其实就是项目的目录
- 安装命令
npm install html-webpack-plugin -D - 配置
const HtmlPlugin = require("html-webpack-plugin")
//创建一个插件的对象
const htmlPlugin = new HtmlPlugin({
template:"./src/index.html", //指定源文件的路径
filenameL:"./indedx.html"//指定生成文件的路径,放在根目录下
})
module.exports={
mode : 'development',
entry: path.join(__dirname,"./src/index1.js"),
output:{
path:path.join(__dirname,"./dist"),
filename:"main.js"
},
//将插件的对象加入到webpack的插件中
plugins:[htmlPlugin]
}
- 启动服务后再次访问localhost:8080后显示的就是index.html界面了。
devServer节点
作用:初次打包完成后,自动打开浏览器显示初始界面。
在webpack配置文件中添加devServer的配置。
module.exports={
devServer:{
open:true,
port:8871,
host:"127.0.0.1"
}
}