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

Question

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

我运行这个命令:

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

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

Run Code Online (Sandbox Code Playgroud)

UPDATE

学习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>

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

Mad*_*bat 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/'
  },

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，10 月前
查看次数：	5112 次
最近记录：	9 年，10 月前