chu*_*nze 7 javascript webpack
polyfill 是一个 js 库，用于消除浏览器之间 js 实现的差异。 这里的测试过程是在标签中添加 polyfill 的脚本以支持 fetch 如果浏览器不支持 fetch。如何获取 webpack build 生成的 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>
在Webpack Stats Plugin 的帮助下应该可以实现。它将 Webpack 生成的统计信息写入文件中，并且应该包含assetsByChunkName或assets属性中某处的 polyfill 的路径。
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
})
]
}
干杯!
| 归档时间： |
|
| 查看次数： |
782 次 |
| 最近记录： |