Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

webpack not reflecting changes in js files with react and django

I'm trying to build an app with React Frontend and Django Rest Framework backend. I use webpack_loader and followed instructions online to set it up. I serve the static files from Amazon CDN, but my local changes on the js files are not reflected when I test locally by python manage.py run server 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'}),
  ],
};

What I ran

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

which collects the static files onto the CDN. I double checked that both vendors.js and index.min.js are correct on the CDN and doesn't contain the old url that I had changed. Now I'm really confused why it's still able to render the old stuff.

"Header.js" locally:

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

But when run on the server:

But when run server

like image 733
RayJ Avatar asked Mar 27 '18 13:03

RayJ


1 Answers

Okay I found out why. It's because the CDN caches the js files, and because I didn't change the name of the files, it thought the file was not updated and kept using the cache. The solution was to add the hash every time the js files are modified, so the CDN renders the new files.

like image 94
RayJ Avatar answered Oct 27 '22 00:10

RayJ