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