Webpack 缓存破坏与哈希值不起作用

Question

Webpack 缓存破坏与哈希值不起作用

Ale*_*lex 3 javascript browser-cache ecmascript-6 webpack

我正在尝试通过在每个 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
        }),
    ]
};

Run Code Online (Sandbox Code Playgroud)

提供 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>

Run Code Online (Sandbox Code Playgroud)

当我对代码进行更改时，我必须硬刷新浏览器才能看到更改，而不是简单地刷新，如果缓存清除起作用，我希望这是简单的刷新。任何帮助表示赞赏；谢谢！

Answer 1

Anh*_*yen 5

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
}
};

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	8 年，2 月前
查看次数：	6747 次
最近记录：	8 年，2 月前