Question

我有一个Flask应用程序正在提供模板index.html，后者又访问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>

烧瓶应用代码如下：

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

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

Answer 1

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

您可以为此插件提供html模板以注入webpack生成的js文件，密切关注以下配置选项：template，inject，chunks，＆＃39 ;散列＆＃39;

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
    }
})

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

1 个答案: