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

Question

I have a Flask app that is serving a template index.html , which in turn access a javascript file generated by webpack. 我有一个Flask应用，该应用正在提供模板index.html ，而该模板又可以访问由webpack生成的javascript文件。 The issue is that I am generating a hash for the webpack generated file, to prevent the browser from caching, and I cannot figure out how to access the webpack generated file, as the hash name can change. 问题是我正在为webpack生成的文件生成哈希，以防止浏览器缓存，并且由于哈希名称可能会更改，因此我无法弄清楚如何访问webpack生成的文件。 For example, if the webpack generates a file called bundle-cdcf74127a4e321fbcf0.js , I would not know the hash function cdcf74127a4e321fbcf0 ahead of time, and so I could not access it in index.html . 例如，如果Webpack生成了一个名为bundle-cdcf74127a4e321fbcf0.js的文件，我将不知道哈希函数cdcf74127a4e321fbcf0提前时间，因此无法在index.html访问它。

Here is my webpack config file: 这是我的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'])]
};

The code used to call the webpack generated file in index.html is below (this code does not work, as it appears that asterisk search does not work in the file name here): 下面是用于在index.html调用webpack生成的文件的代码（此代码不起作用，因为似乎星号搜索在此处的文件名中不起作用）：

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

The flask app code goes like: flask应用程序代码如下所示：

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

How would I fix this code so that it serves the webpack generated file? 我将如何修复此代码，以便为Webpack生成的文件提供服务？

Answer 1

You need to use the webpack plugin htmlWebpackPlugin, refer to https://github.com/jantimon/html-webpack-plugin#configuration . 您需要使用webpack插件htmlWebpackPlugin，请参阅https://github.com/jantimon/html-webpack-plugin#configuration 。

You can provide a html template for this plugin to inject the js files generated by webpack, pay close attention to these configuration options: template , inject , chunks , 'hash'. 您可以为此插件提供一个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
    }
})

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-09-17 02:20:13

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-09-17 02:20:13

解决方案1
2 已采纳 2017-09-17 02:20:13