Webpack 替换资产以进行缓存破坏答案

【问题标题】：Webpack replace asset for cache bustingWebpack 替换资产以进行缓存破坏
【发布时间】：2016-12-18 21:24:47
【问题描述】：

我有问题，可能真的很傻，因为我是 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 的文章，但不是我想要的。所以，问题：

可以使用 Webpack 吗？
有可能吗？
有更好的方法吗？

【问题讨论】：

退房特别是。 url-loader 和 file-loader。他们为此目的为您提供了占位符。

标签： html webpack

【解决方案1】：

是的，可以使用 webpack 进行缓存清除，您可以使用此代码或参考 https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95#.nctflpxl2
我从未尝试过图片，但也可以使用 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"
        }
    }
};




};

【讨论】：