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的sutff，但不是我想要的。所以，问题：

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

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




};

Webpack替换资产以进行缓存清除

1 个答案: