简体   繁体   中英

webpack-dev-server inline flag doesn't work

I've got an extremely simple webpack setup, I'm trying to make automatic reload work. I've got all files in the root directory of the project, to keep things simple.

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]",
      },
    ],
  },
}

and app.js :

console.log("hello everyone!");

To run webpack, I execute:

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

When I change any of the files, I can see webpack-dev-server recompiles, which works fine. However, I still need to refresh the whole page to update new content. I thought I should not need to do that, when using --inline option.

I found out that if I add following line to my html:

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

then auto-reload works fine. But html should NOT contain this line, becuase:

  • it should not get into the repo, not to modify html itself
  • inline should handle that. Either CLI param or the attribute in webpack.config.js file. I used both, neither works.

I don't know why the inline thing doesn't work.

Webpack Dev Server inline mode depends on publicPath. You can add publicPath in your webpack.conf, and address your js file like this: <script src="assets/app.js"></script> . Then the inline mode will work.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM