html - Webpack 替换 Assets 以清除缓存

Question

我有问题，可能真的很傻，因为我是 Webpack 的初学者，但到目前为止给我留下了深刻的印象。

所以，我有一个非常小的个人项目，后端使用 Flask(Python)，前端使用 React，我正在与缓存破坏作斗争(我的意思是，现在不是，而我开发的缓存没有任何问题，但我已经在为部署时担心了)。 我正在使用 Webpack 来捆绑 js 和 css(虽然现在只有 js)。所以我想知道是否可以使用 Webpack 来编写，比如在 css 中，比如:

some-selector {
    background: #00ff00 url("my-background.png") no-repeat fixed center;
}

或在 HTML 中

<script src="bundle.js"></script>

并让 Webpack 在构建生产环境时将这些字符串替换为具有缓存破坏哈希的资源？ 喜欢

some-selector {
    background: #00ff00 url("my-background.987asdh23193jf13.png") no-repeat fixed center;
}

和

<script src="bundle.23kjbi24f92do20f.js"></script>

我看到了一些关于 html-webpack-plugin 或 string-replace-loader 的内容，但不是我想要的。 所以，问题:

1. Webpack 有可能吗？
2. 有可能吗？
3. 有更好的方法吗？

Answer 1

1. 是的，可以使用 webpack 进行缓存清除，您可以为此使用此代码或引用 https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.nctflpxl2

2. 我从未尝试过图像，但也可以使用 webpack。

---

var webpack = require('webpack');    
const path = require("path");    
var ChunkHashReplacePlugin = require('chunkhash-replace-webpack-plugin');   
var WebpackMd5Hash = require('webpack-md5-hash');   
var ManifestPlugin = require('webpack-manifest-plugin');   
var node_dir = __dirname + '/node_modules';    
var HtmlWebpackPlugin = require('html-webpack-plugin');    
var InlineManifestWebpackPlugin=require('inline-manifest-webpack-plugin');    

module.exports = {     

    context: __dirname + '/app',    
    entry: {
        app: './app.js',
        vendor: ['angular', 'underscore', 'restangular', 'angular-ui-router', 'bootstrap', 'angular-ui-bootstrap', 'angular-animate', 'angular-sanitize']
    },
    output: {
        path: path.join(__dirname, "js"),
         filename: "[name].bundle.js"
       // filename: "[name].[chunkhash].bundle.js"

    },
    plugins: [
        function() {
            this.plugin("done", function(stats) {
                require("fs").writeFileSync(
                    path.join(__dirname, "js", "stats.json"),
                    JSON.stringify(stats.toJson()));
            });
        },
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.ProvidePlugin({
            _: "underscore",
            underscore: "underscore"
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["vendor"], // vendor libs + extracted manifest
            minChunks: Infinity
        }),
        new ManifestPlugin({
            filename: "chunk-manifest.json",
            manifestVariable: "webpackManifest"
        }),
        new WebpackMd5Hash(),
        new InlineManifestWebpackPlugin({
            name: 'webpackManifest'
        }),
        new HtmlWebpackPlugin({
            title: ' Portal',
            template: 'index.ejs',
            filename:'../index.html'
        })

    ],
    devServer: {
        inline: true,
        headers: { "Access-Control-Allow-Origin": "*" }

    },
    resolve: {
        alias: {
            "underscore": node_dir + "/underscore/underscore-min.js"
        }
    }
};




};