1. 命令行運行 `npm install webpack-dev-server html-webpack-plugin --save-dev`
2. 項目根目錄下創建 `index.html` 文件
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript設計模式</title>
</head>
<body>
<p>Javascript設計模式</p>
</body>
</html>
```
3. 修改 `webpack.dev.config.js`
```
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: __dirname,
filename: './release/bundle.js'
},
plugin: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
devServer: {
contentBase: path.join(__dirname, './release'), // 根目錄
open: true, // 自動打開瀏覽器
port: 9000
}
}
```
4. 修改 `package.json` 中的 `script.dev` 屬性
```
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"
```
5. 命令行運行 `npm run dev`
