Question

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

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会呈现新文件。

Answer 2

对于每个对index.html或其他页面有问题，未正确更新其内容（例如未显示“ React App”或未更新）的所有人，请尝试在Chrome上使用禁用cookie或隐身（或私密浏览）。我发现我的浏览器使用的是我网站的以前版本，而不是最新版本，无论我保存和运行服务器多少次，但最终禁用cookie都对我有用。

webpack没有反映js文件中的反应和反应和django

2 个答案: