webpack不反映带有react和django的js文件中的更改

Question

我正在尝试使用React Frontend和Django Rest Framework后端构建一个应用程序.我使用webpack_loader并按照在线说明进行设置.我从Amazon CDN提供静态文件,但是当我通过webpack.config.js在本地测试时,我对js文件的本地更改没有反映出来python manage.py run server

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var BundleTracker = require('webpack-bundle-tracker');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: {
      index: ["./js/index.js"],
      explore: ["./js/explore.js"],
      post: ["./js/post.js"]
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/bundle",
    filename: "[name].min.js",
    publicPath: "/src/bundle/",
  },
  plugins: [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    new BundleTracker({filename: './webpack-stats.json'}),
  ],
};

我跑了什么

node_modules/.bin/webpack --config webpack.config.js
python manage.py collectstatic --noinput -i node_modules

它将静态文件收集到CDN上.我仔细检查了两个vendors.js和index.min.js在CDN上是否正确,并且不包含我已更改的旧URL.现在我真的很困惑为什么它仍然能够呈现旧的东西.

"Header.js"在本地:

<img className="logo"src="https://d3h7hz7pb749sg.cloudfront.net/static/src/binary/icon/logo.png" alt="Pique Logo" draggable="false" />

但是在服务器上运行时:

Answer 1

好吧，我知道为什么了。是因为CDN缓存了js文件，而且因为我没有改文件名，所以它认为文件没有更新，一直使用缓存。解决方案是每次修改 js 文件时添加哈希值，以便 CDN 呈现新文件。