0

I try to run our ASP.NET MVC project with webpack2. As the first step, I set up webpack2 with ExtractTextPlugin.

When running webpack watch, I can see that the bundled css file gets updated. But if I run the project with IISExpress and with webpack watch running, the browser just won't pickup the latest change even though the file has changed.

Verified that if I turn off webpack watch and refresh the browser, then I can see those changes in the browser.

I am running without webpack dev server, here is the webpack.config.js:

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

module.exports = env => {

    return {
        entry: {
            "main": "./static/entry.js",
            "component": path.resolve(__dirname, "../component/static/bundle.js")
        },
        output: {
            path: path.resolve(__dirname, "./static/dist/scripts"),
            filename: "[name].index.js"
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
        exclude: /node_modules/,
                    use:ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: [
                            { 
                                loader: 'css-loader',
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    sourceMap: true,
                                    includePaths: [
                                        path.resolve(__dirname, './default.css'),
                                        path.resolve(__dirname, './normalize.css')
                                    ]
                                }
                            }
                        ]
                    })
                },
                { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
                { test: /\.ts$/, loader: 'babel-loader', exclude: /node_modules/ }
            ]
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: path.resolve(__dirname, './node_modules/jquery/src/jquery'),
                jQuery: path.resolve(__dirname, './node_modules/jquery/src/jquery'),
                moment: path.resolve(__dirname, './node_modules/moment/moment')
            }),
            new ExtractTextPlugin({
                filename: "../style/[name].style.css",
                allChunks: true
            }),
            new webpack.optimize.UglifyJsPlugin({
                minimize: true,
                compress: {
                    warnings: false
                }
            })
    ]

    }

};

The issue is constant and I have no idea what could have happened, help please.

yyc
  • 288
  • 1
  • 4
  • 16

1 Answers1

0

I found the cause of this problem.

Project web.config is caching the client resources, disable output caching fixed the issue.

<caching>
  <outputCache enableOutputCache="false" />
</caching>
yyc
  • 288
  • 1
  • 4
  • 16