How do I get the webpack output file name with hash value in the js module code?

user_10843356 0
Viewed 989

Polyfill is a js library that smooths out the differences in js implementations between browsers.The test procedure here is to add polyfill's script to the tag to support fetch if the browser does not support fetch.How do I get the webpack build generated polyfiles.js file name with hash value?

webpack.config.js file content:

const path = require('path');
module.exports = {
    entry: {
        app: './src/index.js',
        another: './src/another.js',
                polyfills: './src/polyfills.js'
    },
    output: {
        **filename: '[name].[chunkhash].js',**
        path: path.resolve(__dirname, 'dist')
    }
}

index.js file content:

import 'babel-polyfill';
var modernBrowser = (
    'fetch' in window && 
    'assign' in Object
);

if (!modernBrowser) {
    var scriptElement = document.createElement('script');

    scriptElement.async = false;
    **scriptElement.src = './polyfills.js';**

    document.head.appendChild(scriptElement);
}

fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(json => {
        console.log('We retrieved some data! AND we\'re confident it will work on a variety of brower distributions.');
        console.log(json);
    })
    .catch(error => console.error('Something went wrong when when fetching this data: ', error));

expected result:

<html>
    <head>
        <meta charset="UTF-8">
        <title>Production</title>
        **<script src="polyfills.03c614b6256ac2293323.js"></script>**
    </head>
    <body>
        <script src="app.d7fb858ab050773be201.js" type="text/javascript"></script>
        <script src="another.afe2eeac5ed9fc767a52.js" type="text/javascript"></script>
        <script src="polyfills.03c614b6256ac2293323.js" type="text/javascript"></script>
    </body>
</html>

actual result:

<html>
    <head>
        <meta charset="UTF-8">
        <title>Production</title>
        **<script src="./polyfills.js"></script>**
    </head>
    <body>
        <script src="app.d7fb858ab050773be201.js" type="text/javascript"></script>
        <script src="another.afe2eeac5ed9fc767a52.js" type="text/javascript"></script>
        <script src="polyfills.03c614b6256ac2293323.js" type="text/javascript"></script>
    </body>
</html>
webpack javascript
1 Answers

Should be possible with Webpack Stats Plugin's help. It writes stats generated by Webpack into the file and it should contain path to the polyfill somewhere in the assetsByChunkName or assets properties.

const path = require('path');
const { StatsWriterPlugin } = require("webpack-stats-plugin")

module.exports = {
  entry: {
    app: './src/index.js',
        another: './src/another.js',
                polyfills: './src/polyfills.js'
  },
  output: {
    **filename: '[name].[chunkhash].js',**
        path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // Write out stats file to build directory.
    new StatsWriterPlugin({
      stats: {
        all: false,
        assetsByChunkName: true,
        assets: true
      },
      filename: "stats.json" // Default and lands in your output folder
    })
  ]
}

More usage examples and installation instructions could be found in their repo

Cheers!

user_45535940
Related