Javascript 如何建立一个简单的Web包开发服务器项目？

我正在尝试建立一个简单的WebpackJavaScript启动程序项目，使用香草JavaScript的最低限度。当我建立这个项目时，一切都很好。但是，如果我尝试使用WebpackDevServer运行项目，则在进行更改时不会更新任何内容

此安装程序不使用webpack.config.js文件

webpack dev server是否需要配置文件才能正确执行此功能

package.json

{
  "name": "javascript-starter-project",
  "version": "0.0.1",
  "description": "A simple boilerplate JavaScript starter project.",
  "license": "MIT",
  "author": "...",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --inline --open --port 8080"
  },
  "dependencies": {
    "webpack": "^4.36.1"
  },
  "devDependencies": {
    "prettier": "^1.18.2",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

{
  "name": "javascript-starter-project",
  "version": "0.0.1",
  "description": "A simple boilerplate JavaScript starter project.",
  "license": "MIT",
  "author": "...",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open --port 8080"
  },
  "dependencies": {
    "webpack": "^4.36.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "prettier": "^1.18.2",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

index.html

JavaScript初学者项目
点击我！

src/index.js

const button = document.getElementById("button");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  output.innerText = "Hello!~";
});

const button = document.getElementById("button");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  output.innerText = "Hello World!~";
});

const button = document.getElementById("button");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  output.innerText = "Hello!~";
});

现在，如果我构建它，单击按钮将生成预期的“Hello！~”文本

当我运行使用webpack dev server的npm start时，同样的行为也会发生。但是，当我进行任何更改（“Hello！~”编辑为“Hello World！~”）时：

src/index.js

const button = document.getElementById("button");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  output.innerText = "Hello!~";
});

const button = document.getElementById("button");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  output.innerText = "Hello World!~";
});

const button = document.getElementById("button");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  output.innerText = "Hello!~";
});

。。。和刷新页面时运行的更改不会反映出来

我错过了什么？我需要一个webpack.config.js文件来完成这项工作吗

编辑：

工作设置现在如下所示：

package.json

{
  "name": "javascript-starter-project",
  "version": "0.0.1",
  "description": "A simple boilerplate JavaScript starter project.",
  "license": "MIT",
  "author": "...",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --inline --open --port 8080"
  },
  "dependencies": {
    "webpack": "^4.36.1"
  },
  "devDependencies": {
    "prettier": "^1.18.2",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

{
  "name": "javascript-starter-project",
  "version": "0.0.1",
  "description": "A simple boilerplate JavaScript starter project.",
  "license": "MIT",
  "author": "...",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open --port 8080"
  },
  "dependencies": {
    "webpack": "^4.36.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "prettier": "^1.18.2",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

src/index.html

JavaScript初学者项目
点击我！

src/index.js

const button = document.getElementById("button");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  output.innerText = "Hello!~";
});

const button = document.getElementById("button");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  output.innerText = "Hello World!~";
});

const button = document.getElementById("button");
const output = document.getElementById("output");

button.addEventListener("click", () => {
  output.innerText = "Hello!~";
});

---

现在，当我

npm启动

并编辑

src/index.js

时，更改被拾取！我希望会有比这更简单的复杂度，但这是非常稀疏的，所以我将接受它。

问题是

index.html

文件中存在

。当您点击

npm start

或

npm run start

时，webpack dev server会正确启动。它相应地提供

index.html

和

main.js

文件

webpack dev server有两个任务：内存中的资产绑定和实时重新加载。内存中需要支持实时重新加载

当您更改

index.js

时，就会出现问题。Webpack确实检测到了这些更改，它构建了这些更改，但并没有真正将捆绑文件发送回磁盘它内置在内存中。在本例中，由于您在

index.html

中硬编码了

dist/main.js

，因此不会生成新的

main.js

，并且在页面刷新时看不到更改

您可以做的最快的事情是在监视模式下运行构建脚本。因此，在另一个终端中使用以下npm脚本：

“build”：“webpack--watch”

。现在，每次保存时，都会生成生成，您可以在刷新时看到更改

但这违背了使用webpack开发服务器的目的。如果这是一条路径，那么您可以使用一些简单的方法，例如

---

要通过实时重新加载、HMR、im内存绑定充分利用dev server的功能，您需要一个适当的

webpack.config.js

文件。另外，您必须使用生成

index.html

文件，以便实时重新加载可以工作。

谢谢！这让我找到了我需要做的事情。我添加了一个webpack.config.js文件，其中仅包含使用HtmlWebPackPlugin设置的插件属性。我从index.html文件中删除了脚本标记，并将该文件移动到我的src目录中。我将编辑我的问题以添加设置的完整详细信息。