Polyfill - это библиотека js, которая сглаживает различия в реализациях js между браузерами. Тестовая процедура заключается в добавлении скрипта polyfill в тег для поддержки выборки, если браузер не поддерживает выборку. Как получить сгенерированную сборку веб-пакета имя файла polyfiles.js со значением хеша?
Содержание файла webpack.config.js:
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 содержимое файла:
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));
ожидаемый результат:
<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>
фактический результат:
<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>