logo标签列表

如何在webpack-dev-server运行期间更新静态index.html页面的bundle.js？

webpack
3

我运行了这个命令：

webpack-dev-server --content-base deployment/deployment --hot --inline

这样我的网站就能正确启动。然后我更新了randomFile.js，加入了错误的语法（插入“abc”），应该会导致lint错误或某种类型的故障。当我保存randomFile.js时，webpack会报告“webpack: bundle is now valid”，并显示我修改的文件以及两个其他文件(不知道为什么还有其他2个)。Webpack还报告正在发射“bundle.js”和“guid.hot-update.json”。

但是网站没有更新。

我检查了

deployment/deployment/js/bundle.js

它没有更新。

webpack.config.js（还有.dev和.prod版本，似乎被webpack-dev-server忽略了）

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-hot-middleware/client',
    './src/main.js'
  ],
  output: {
    path: path.join(__dirname, 'deployment/deployment/js'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.jpg/,
      loader: 'file'
    }, {
      test: /\.css$/,
      loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]}, {
      test: /\.scss$/,
      loaders: [
         'style?sourceMap',
         'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
         'resolve-url',
         'sass?sourceMap'
     ]
   },{
        loader:'babel-loader',
                exclude: path.resolve(__dirname, "node_modules"),
                test: /\.js/
    }]
  }
}

更新

在了解webpack-dev-server不会更新原始的bundle.js之后，我认为我知道问题出在哪里了。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Site</title>

  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bundle.css" /> 

  <input type="hidden" id="myUrlConfigValueInput" value="http://localhost/FibReactHello2/js/bundle.js">
  <input type="hidden" id="myAPIUrlConfigValueInput" value="http://localhost/mySite/api/">
</head>
<body>
  <div id="appEntrypt"></div>
    <script src="js/bundle.js"></script>
</body>
</html>

ReactJS的入口点在`appEntrypt`。这里有一个依赖项需要用到`bundle.js`。由于webpack-dev-server不会更新此文件（只更新内存中的文件），因此我的网站永远不会更新。
我该怎么办才能解决这个问题？
1
如果我理解正确的话，webpack dev server实际上并不会更新bundle.js文件。它是在内存中打包并从内存中提供文件。因此，您的网站可能会出现JavaScript错误，但您将看不到文件系统上的更改。而且您似乎没有配置任何linting，因此没有进行任何linting。 - Mad Wombat
你的配置文件有些奇怪。你使用 require() 导入了 html-webpack-plugin，但并没有将其实际插入到配置中。是否有静态 index.html 文件？你将 webpack-hot-middleware/client 添加到入口文件中，但是没有使用中间件，所以我认为你的网站不会自动重新加载。如果手动重新加载页面，你的网站是否会更新？ - Mad Wombat
不用在意我之前的评论，看起来你有一个静态HTML文件。 - Mad Wombat
你能看到你的 React 组件实际上被显示出来了吗？ - Mad Wombat
让我们在聊天中继续这个讨论。 - Mad Wombat
显示剩余2条评论
1个回答
6

经过一番讨论，似乎publicPath指令导致webpack开发服务器提供静态编译的捆绑包，而不是由开发服务器在内存中生成的捆绑包。将publicPath更改为/js/可以解决问题：

webpack.config.js

output: {
    path: path.join(__dirname, 'deployment/deployment/js'),
    filename: 'bundle.js',
    publicPath: '/js/'
  },
我可以建议您稍微重新配置webpack以适应dev server。如果您正在使用类似于express或koa服务器的中间件，则“webpack-hot-middleware / client”条目才有效。我发现正确配置react组件的真正热重载（即重新渲染组件而无需重新加载页面本身）有些困难。您可以将webpack-dev-server / client？http://localhost:8080/添加到您的条目中并删除热重载，这样您的页面在更改时就会重新加载，或者我可以发布我的自己的热重载配置，其中包括一个简单的express服务器。 - Mad Wombat
遗憾的是使用新的入口点的建议并没有起作用。该程序正在使用“'./src/main.js'”作为入口点。我已经成功移除了hot-middleware/client。 - P.Brian.Mackey
是的，你应该保留src/main.js，因为那是你的主文件入口点。 - Mad Wombat
即使使用了webpack-dev-server和main.js入口点，屏幕仍然会闪烁。顺便提一下，我已经将HtmlWebpackPlugin列为依赖项，但它并没有被使用。 - P.Brian.Mackey
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接