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

时间:2016-03-17 14:32:55

标签: webpack

我运行此命令:

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

这会正确启动我的网站。然后我更新了randomFile.js语法错误(插入“abc”),这会导致lint错误或某种失败。当我保存randomFile.js webpack报告“webpack:bundle现在有效”并显示我修改的文件以及另外两个文件(不知道为什么其他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>

ReactJSappEntrypt处有一个入口点。 bundle.js上有一个依赖项。因为webpack-dev-server不更新此文件(仅限内存文件),所以我的站点永远不会更新。

我该怎么做才能解决这个问题?

1 个答案:

答案 0 :(得分:6)

经过一番广泛的讨论后,似乎publicPath指令导致webpack dev服务器提供静态编译的bundle而不是dev服务器在内存中生成的bundle。将publicPath更改为/js/修复了一些问题:

webpack.config.js

output: {
    path: path.join(__dirname, 'deployment/deployment/js'),
    filename: 'bundle.js',
    publicPath: '/js/'
  },