带有哈希的 Webpack 缓存破坏不起作用答案

【问题标题】：Webpack cache busting with hashes not working带有哈希的 Webpack 缓存破坏不起作用
【发布时间】：2023-04-08 23:41:01
【问题描述】：

我正在尝试通过在每个 javascript 文件的末尾添加一个哈希来使用 webpack 进行缓存破坏。我的 webpack 配置文件如下：

const AssetsPlugin = require('assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
//const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./js/main.js",
    output: {
        path: __dirname + '/static/',
        publicPath: '',
        filename: "bundle-[hash].js",
    },
    resolveLoader: {
    moduleExtensions: ['-loader']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader',
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['static/bundle*.js'], {watch: true}),
        new AssetsPlugin({
                filename: 'static/webpack.assets.json',
                prettyPrint: true
        }),
    ]
};

为 webpack 创建的 javascript 文件提供服务的 index.html 文件如下：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" >
            $.getJSON('webpack.assets.json', function(data){
                <!--
                var bundleScript = "<script src=" + data['main']['js'] + "></script>";
                var div = document.getElementById('app');
                div.innerHTML = bundleScript;
                $(bundleScript).appendTo('#app');
                //!-->
            });
        </script>
    </head>

    <body>
        <div id="app"></div>
    </body>
</html>

当我对代码进行更改时，我必须用力刷新浏览器才能看到更改，而不是单纯地刷新，如果缓存破坏能够正常工作，我会期望这样。任何帮助表示赞赏；谢谢！

【问题讨论】：

我认为在 webpack 服务器运行脚本中添加--watch 会对你有所帮助

标签： javascript webpack ecmascript-6 browser-cache

【解决方案1】：

Webpack 缓存破坏仍然在这里工作。如果您更改代码，webpack 将使用不同的哈希 (https://webpack.js.org/guides/caching) 重新创建文件

您想要的称为热重载。你可以在https://webpack.js.org/concepts/hot-module-replacement/了解更多信息

要使用热重载，您应该创建新配置：

const AssetsPlugin = require('assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
entry: "./js/main.js",
output: {
    path: __dirname + '/static/',
    publicPath: '',
    filename: "bundle.js", // remove hash
},
resolveLoader: {
moduleExtensions: ['-loader']
},
module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
                presets: ['react', 'es2015', 'stage-0']
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader',
        },
        {
            test: /\.css$/,
            loader: 'css-loader',
            query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
            }
        }
    ]
},
plugins: [
    // new CleanWebpackPlugin(['static/bundle*.js'], {watch: true}), comment it
    // new AssetsPlugin({
    //        filename: 'static/webpack.assets.json',
    //        prettyPrint: true
    // }), and this 
],
devServer: {
  contentBase: path.join(__dirname, "static"),
  compress: true,
  port: 9000
}
};

然后运行：webpack-dev-server -c 'your new config' --hot

【讨论】：

嗨 imcvampire，感谢您的链接。您是否认为您也可以使用“热重载”的东西提供一些代码？谢谢。

【解决方案2】：

这是我的配置文件中的示例

安装 babel hmre 插件

npm install --save-dev babel-preset-react-hmre


module.exports = {
  // entry and output options

  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel",
      include: __dirname,
      query: {
        presets: [ 'es2015', 'react', 'react-hmre' ]
      }
    }]
  }
}

并在 package.json 中编辑您的启动脚本以启用热选项：

"start": "webpack-dev-server --progress --inline --hot",

【讨论】：

【解决方案3】：

index.html 只提供给浏览器一次。在此 html 文件中编写的用于加载资产的代码也仅在浏览器中运行一次。一旦您对代码进行了更改，webpack 可以使用新的哈希名称创建新的捆绑包，但您的浏览器不会意识到这一点，并且不会自行下载新的资产文件。这就是您的更改未反映在浏览器中的原因。缓存破坏通常用于生产构建。对于开发环境，使用热模块重新加载。下面是一个 hmr 的例子。

webpack.config.dev.js

/**
 * Created by ishan.trivid on 28-06-2016.
 */
import webpack from "webpack";
import path from "path";

export default {
debug: true,
devtool: "cheap-module-eval-source-map",
noInfo: true,
entry: [
    "eventsource-polyfill", // necessary for hot reloading with IE
    "webpack-hot-middleware/client?reload=true", //note that it reloads the page if hot module reloading fails.
    "./src/index"
],
target: "web",
output: {
    path: __dirname + "/dist", // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: "/",
    filename: "bundle.js"
},
devServer: {
    contentBase: "./src"
},
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
],
module: {
    loaders: [
        {test: /\.js$/, include: path.join(__dirname, "src"), loaders: ["babel"]},
        {test: /(\.css)$/, loaders: ["style", "css"]},
        {test: /\.(png)$/, loader: "url-loader?limit=1000000"},
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
        {test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000"},
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}
    ]
}
};

srcServer.js

import express from "express";
import webpack from "webpack";
import path from "path";
import config from "./webpack.config.dev";
import open from "open";

const port = 3000;
const app = express();
const compiler = webpack(config);

app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));

app.use(require("webpack-hot-middleware")(compiler));

app.get("*", function(req, res) {
    res.sendFile(path.join( __dirname, "../src/index.html"));
});

app.listen(port, function(err) {
    if (err) {
        console.log(err);
    } else {
        open(`http://localhost:${port}`);
    }
});

现在在 package.json 的脚本部分添加以下命令

开始：“babel-node srcServer.js”

现在在终端中运行“npm run start”命令

【讨论】：

很好的答案，但是如何在生产环境中缓存 index.html？