如何从 index.html 访问 webpack 生成的 js 文件答案

【问题标题】：How to access webpack generated js file from index.html如何从 index.html 访问 webpack 生成的 js 文件
【发布时间】：2017-09-17 01:43:12
【问题描述】：

我有一个提供模板index.html 的 Flask 应用程序，该模板又访问由 webpack 生成的 javascript 文件。问题是我正在为 webpack 生成的文件生成哈希，以防止浏览器缓存，并且我无法弄清楚如何访问 webpack 生成的文件，因为哈希名称可以更改。例如，如果 webpack 生成了一个名为bundle-cdcf74127a4e321fbcf0.js 的文件，我不会提前知道哈希函数cdcf74127a4e321fbcf0，所以我无法在index.html 中访问它。

这是我的 webpack 配置文件：

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中用于调用webpack生成文件的代码如下（这段代码不起作用，因为这里的文件名中星号搜索似乎不起作用）：

<body>
    <div id="app"></div>
    <script src="bundle*.js"></script>
</body>

flask 应用程序代码如下：

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

我将如何修复此代码以便它为 webpack 生成的文件提供服务？

【问题讨论】：

标签： javascript html webpack

【解决方案1】：

需要使用webpack插件htmlWebpackPlugin，参考https://github.com/jantimon/html-webpack-plugin#configuration。

你可以为这个插件提供一个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 注入似乎导致 webpack 不断刷新并生成新文件。你知道如何阻止这种情况发生吗？
@Alex 我们需要将此文件输出到特定目录以用于 webpack 编译的输出，并在输出前使用CleanWebpackPlugin 清理目录。这是一个常见的解决方案。
嗯，我试过这样做，但刷新仍在发生。奇怪的。我只会问一个新问题。感谢您的帮助！