我正在尝试为我的项目入门套件进行配置 . 我假设的项目结构如下所示：

.................................................. ..
DIST
---- bundle.js

node_modules ...

SRC
---- main.js

的index.html

的package.json

webpack.config.js
.................................................. ..

我的webpack配置如下所示：

的package.json

{
  "name": "webpack_starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "watch": "npm run build -- --watch",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    }
};

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1>Hello World!</h1>

<script src="/dist/bundle.js"></script>
</body>
</html>

main.js

console.log("test");

我正在尝试配置webpack，以便它可以从src /中提取dist /目录中的所有内容，观察src /中的更改并在dist / src / files中更改，更改后应该重新加载浏览器 .

我的配置有什么问题（dev服务器只运行，不编译任何东西）以及如何解决它？

javascript web webpack frontend webpack-dev-server