Question

我有一个非常简单的webpack设置，我正在尝试自动重新加载工作。我已经将所有文件都放在项目的根目录中，以保持简单。

index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack</title>
  </head>
  <body>hello</body>
  <script src="app.js"></script>
</html>

webpack.config.js：

module.exports = {
  context: __dirname,
  entry: {
    javascript: "./app.js",
    html: "./index.html",
  },
  output: {
    filename: "bundle.js"
  }, 
  watch: true,
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
    ],
  },
}

和app.js：

console.log("hello everyone!");

要运行webpack，我执行：

$ ./node_modules/.bin/webpack-dev-server --inline

当我更改任何文件时，我可以看到webpack-dev-server重新编译，这可以正常工作。但是，我仍然需要刷新整个页面来更新新内容。我认为在使用--inline选项时我不应该这样做。

我发现如果我在html中添加以下行：

<script src="http://localhost:8080/webpack-dev-server.js"></script>

然后自动重新加载工作正常。但是html应该 NOT 包含这一行，因为：

它不应该进入回购，而不是修改html本身
inline应该处理这个问题。 CLI参数或webpack.config.js文件中的属性。我用过这两种，都没有用。

我不知道为什么inline不起作用。

Answer 1

Webpack Dev Server内联模式依赖于publicPath。您可以在webpack.conf中添加publicPath，并像这样解决您的js文件：<script src="assets/app.js"></script>。然后内联模式将起作用。

webpack-dev-server内联标志不起作用

1 个答案: