Webpack Middleware JS files don't update with new changes all the time. #415

New Issue

fergalmoran · 2025-08-09T17:16:12Z

fergalmoran commented

2025-08-09 17:16:12 +00:00

Originally created by @MartinDawson on 9/19/2017

Title

Webpack Middleware JS files don't update with new changes all the time.

Functional impact

Changes aren't updating the .js files

Minimal repro steps

What is the smallest, simplest set of steps to reproduce the issue. If needed, provide a project that demonstrates the issue.

Create a new asp.net core project and use the webpack.config.js and startup.cs code at the bottom of this issue
Run the application with this command:
ASPNETCORE_ENVIRONMENT=Development dotnet run
Make changes to a .js file

Expected result

Once the page is manually refreshed after ~2 secs the new changes should be in the .js file(s)

Actual result

Sometimes the changes are not in the .js files in the browser, this is intermittent.

Further technical details

My js files don't always update when making changes in the files. This is intermittent and looks like a caching issue. However clearing browser cache and cookies doesn't work either. The only thing that works seems to be changing the js src in the html to something else and then back again.

Startup.cs:

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
                app.UseDatabaseErrorPage();
                app.UseBrowserLink();
                app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {
                    ConfigFile = "./webpack.config.js"
                });
            }

Webpack.config.js

const Webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const fs = require('fs');

const dev = process.env.NODE_ENV !== 'production';
const plugins = [
  new Webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor.bundle.js',
  }),
  new ExtractTextPlugin('[name].bundle.css'),
];
let devtool = null;

if (!dev) {
  plugins.push([
    new Webpack.optimize.DedupePlugin(),
    new Webpack.optimize.OccurenceOrderPlugin(),
    new Webpack.optimize.UglifyJsPlugin(),
  ]);
} else {
  devtool = 'inline-sourcemap';
}

module.exports = {
  context: __dirname,
  devtool,
  entry: {
    app: './wwwroot/components/app/component.jsx',
    vendor: [
      'react',
      'react-dom',
      'react-router',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'wwwroot/build/'),
    publicPath: '/wwwroot/build/',
    filename: '[name].bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: [ path.resolve(__dirname, 'wwwroot/components')  ],
        loader: 'babel-loader',
      },
      {
        test: /\.(css|less)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [{
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            },
          }, {
            loader: 'postcss-loader',
            options: {
              config: {
                path: './postcss.config.js',
              },
            },
          }, {
            loader: 'less-loader',
          }],
        }),
      },
    ],
  },
  plugins,
  resolve: {
    extensions: [
      '.js',
      '.jsx',
    ],
  },
};

Html scripts:

<script src="/build/vendor.bundle.js"></script>
<script src="/build/app.bundle.js"></script>

*Originally created by @MartinDawson on 9/19/2017* ### Title Webpack Middleware JS files don't update with new changes all the time. ### Functional impact Changes aren't updating the .js files ### Minimal repro steps *What is the smallest, simplest set of steps to reproduce the issue. If needed, provide a project that demonstrates the issue.* 1. Create a new asp.net core project and use the webpack.config.js and startup.cs code at the bottom of this issue 2. Run the application with this command: `ASPNETCORE_ENVIRONMENT=Development dotnet run` 3. Make changes to a .js file ### Expected result Once the page is manually refreshed after ~2 secs the new changes should be in the .js file(s) ### Actual result Sometimes the changes are not in the .js files in the browser, this is intermittent. ### Further technical details My js files don't always update when making changes in the files. This is intermittent and looks like a caching issue. However clearing browser cache and cookies doesn't work either. The only thing that works seems to be changing the js src in the html to something else and then back again. Startup.cs: ``` if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); app.UseDatabaseErrorPage(); app.UseBrowserLink(); app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { ConfigFile = "./webpack.config.js" }); } ``` Webpack.config.js ``` const Webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const fs = require('fs'); const dev = process.env.NODE_ENV !== 'production'; const plugins = [ new Webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', }), new ExtractTextPlugin('[name].bundle.css'), ]; let devtool = null; if (!dev) { plugins.push([ new Webpack.optimize.DedupePlugin(), new Webpack.optimize.OccurenceOrderPlugin(), new Webpack.optimize.UglifyJsPlugin(), ]); } else { devtool = 'inline-sourcemap'; } module.exports = { context: __dirname, devtool, entry: { app: './wwwroot/components/app/component.jsx', vendor: [ 'react', 'react-dom', 'react-router', ], }, output: { path: path.resolve(__dirname, 'wwwroot/build/'), publicPath: '/wwwroot/build/', filename: '[name].bundle.js', }, module: { loaders: [ { test: /\.jsx?$/, include: [ path.resolve(__dirname, 'wwwroot/components') ], loader: 'babel-loader', }, { test: /\.(css|less)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [{ loader: 'css-loader', options: { importLoaders: 2, modules: true, localIdentName: '[path][name]__[local]--[hash:base64:5]', }, }, { loader: 'postcss-loader', options: { config: { path: './postcss.config.js', }, }, }, { loader: 'less-loader', }], }), }, ], }, plugins, resolve: { extensions: [ '.js', '.jsx', ], }, }; ``` Html scripts: ``` <script src="/build/vendor.bundle.js"></script> <script src="/build/app.bundle.js"></script> ```

fergalmoran closed this issue

2025-08-09 17:16:12 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#415