Question

我正在尝试建立一个简单的webpack JavaScript入门项目，其绝对最低限度可与原始JavaScript一起使用。当我构建项目时，一切正常。但是，如果我尝试使用webpack-dev-server运行项目，则进行更改时不会更新。

此设置不使用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"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Starter Project</title>
  </head>
  <body>
    <button id="button">Click me!</button>
    <div id="output"></div>
    <script src="dist/main.js"></script>
  </body>
</html>

src / index.js

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 World!~";
});

...并刷新运行在http://localhost:8080/的页面，更改不会反映出来。

我想念什么？我需要一个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 --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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Starter Project</title>
  </head>
  <body>
    <button id="button">Click me!</button>
    <div id="output"></div>
  </body>
</html>

src / index.js

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

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

现在，当我npm start并编辑src/index.js时，所做的更改就可以了！我本来希望比这更少的复杂性，但这很稀疏，所以我接受它。

Answer 1

问题是<script src="dist/main.js"></script>文件中存在index.html。当您按下npm start或npm run start时，webpack-dev-server会正确启动。它相应地为index.html和main.js文件提供服务。

webpack-dev-server 有两个工作：内存中的资产捆绑和实时重装。需要内存以支持实时重新加载。

当您对index.js进行更改时，就会发生此问题。 Webpack确实可以检测到更改，它可以构建，但实际上并没有将捆绑的文件发送回磁盘。 它内置在内存中。在您的情况下，由于您已经在dist/main.js中对index.html进行了硬编码，因此不会生成新的main.js，并且不会在页面刷新上看到更改。

最快的方法是在监视模式下运行构建脚本。因此，请在另一个终端中使用以下npm脚本："build": "webpack --watch"。现在，每次保存时，都会生成该构建，并且您可以在刷新时看到更改。

但是，这违背了使用webpack-dev-server的目的。如果这是路径，那么您希望使用http-server之类的简单名称。

要充分利用实时重载，HMR和内存捆绑来充分利用dev-server的功能，您需要一个适当的webpack.config.js文件。另外，您必须使用html-webpack-plugin来生成index.html文件，以便实时重新加载可以正常工作。

如何建立一个无效的简单webpack-dev-server项目？

1 个答案: