webpack-dev-server是:
为webpack打包生成的资源文件提供web服务的小型的Express服务器。但是不能当作后台服务器来使用。
主要功能:
静态文件提供服务
自动刷新和热替换
安装插件:
npm i webpack-dev-server -D
npm i -D html-webpack-plugin
该插件主要作用:
1.生成创建html入口文件
2.为html文件中引入的打包的script、link资源
项目文件夹和文件如下:
common.js内容:
entry.js内容:
index.html内容:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="./dist/dist.js"></script>
<div id="app">hello,webpack</div>
<div><button>按钮</button></div>
</body>
</html>
webpack.base.js内容:
添加了plugins 和 devServer的配置
Package.json里面内容为
{
"scripts": {
"build":"webpack --config build/webpack.base.js",
"dev": "webpack serve --config build/webpack.base.js",
}
执行 npm run dev后 访问:127.0.0.1:8080