Webpack-dev-server inline标志不起作用

webpack-dev-server inline flag doesn't work

本文关键字：不起作用 标志 inline Webpack-dev-server      更新时间：2023-09-26

我有一个非常简单的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包含这一行，因为:

  • 它不应该进入repo，不应该修改html本身
  • inline应该处理。CLI参数或webpack.config.js文件中的属性。我两种都用过，都不行。

我不知道为什么inline的东西不工作

Webpack Dev Server内联模式依赖于publicPath。你可以在webpack.conf中添加publicPath，并将你的js文件命名为:<script src="assets/app.js"></script>。

相关文章：