Javascript 如何从index.html访问Web包生成的js文件

我有一个Flask应用程序，它提供一个模板

index.html

，该模板反过来访问由webpack生成的javascript文件。问题是我正在为webpack生成的文件生成哈希，以防止浏览器缓存，并且我无法确定如何访问webpack生成的文件，因为哈希名称可能会更改。例如，如果Web包生成一个名为

bundle-cdcf74127a4e321fbcf0.js

的文件，我将不会提前知道哈希函数

cdcf74127a4e321fbcf0

，因此我无法在

index.html

中访问它

这是我的网页包配置文件：

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

module.exports = {
    entry: "./js/main.js",
    output: {
        filename: "static/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'])]
};

用于在

index.html

中调用网页生成文件的代码如下（此代码不起作用，因为此处的文件名中的星号搜索似乎不起作用）：

---

如何修复此代码，使其为网页包生成的文件提供服务？

您需要使用网页包插件htmlWebpackPlugin，请参阅

你可以为这个插件提供一个html模板来注入由webpack生成的js文件，请密切注意这些配置选项：

template

，

inject

，

chunks

，“hash”

new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
    template: './index.html'
    favicon: './favicon.ico',
    filename: './dist/index.html'
    inject: 'body',
    chunks: ['vendor', 'app'],
    minify: {
      collapseWhitespace: true,
      removeComments: true,
      removeAttributeQuotes: true
    }
})

---

你能告诉我密码吗？谢谢，谢谢。这个包所做的HTML注入似乎正在导致网页不断刷新并生成新文件。你知道如何阻止这种情况发生吗？@Alex我们需要将此文件输出到一个特定的目录中，用于网页编译的输出，并在输出之前使用

CleanWebpackPlugin

清理该目录。这是一个常见的解决方案。嗯，我试过这么做，但还是让人耳目一新。奇怪的我只想问一个新问题。谢谢你的帮助！

app = Flask(__name__, static_url_path='')
@app.route('/')
def default():
    return render_template('index.html')

new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
    template: './index.html'
    favicon: './favicon.ico',
    filename: './dist/index.html'
    inject: 'body',
    chunks: ['vendor', 'app'],
    minify: {
      collapseWhitespace: true,
      removeComments: true,
      removeAttributeQuotes: true
    }
})