<Webpack深入浅出plugin Webpack构建流程之源码分析>

Webpack自动更新php静态资源文件名hash

这是一个plugin的简单实例，它实现每当静态资源有变化时，如scss有修改，它自动生成的还hash的css文件名，会同步在php文件中更新，原理很简单，我们监听Compiler的afterEmit勾子，当完成输出时，我们会对比文件名的一致性。

./src/plugins/php-resource-replace-plugin.js
```javascript
const glob = require('glob');
const fs = require("fs");

// 替换
function PhpResourceReplacePlugin() {
}
PhpResourceReplacePlugin.prototype.apply = function(compiler) {
	compiler.hooks.afterEmit.tap('PhpResourceReplacePlugin', (compilation) => {
		const files = glob.sync('resources/views/**/*.blade.php')
		for(var i = 0; i < files.length; i++) {
			if (!files[i]) {
				break
			}
			let fileUrl = files[i]
			fs.readFile(fileUrl, (err, data) => {
				if (err) {
					console.log('readFile error:')
					console.log(err)
					return
				}
				let dataStr = data.toString();
				for (let k in compilation.assets) {
					if (dataStr.indexOf(k) >= 0) {
						console.log('break')
						break
					}
					let prevName = k.split('.')[0]
					if (dataStr.indexOf(prevName) >= 0) {
						dataStr = dataStr.replace(new RegExp(prevName + '(\w*?)' + '\.(js|css|png|jpg)'), k)
						fs.writeFile(fileUrl, dataStr, 'utf8', (err) => {
							console.log('writeFile error:')
							console.log(err)
						})
					}
				}
			})
		}
		return true;
	});
}

module.exports = PhpResourceReplacePlugin
```
或以class的格式
```javascript
class PhpResourceReplacePlugin {
  apply(compiler) {
    compiler.hooks.afterEmit.tap('PhpResourceReplacePlugin', compilation => {
      // same code
    });
  }
}
```
过程如下：
　　先拿出所有的.blade.php文件。
　　核对是不是一个文件名 k.split('.')[0]，这是构建出来的文件相对路径的前缀。（如生成的目录是css/movie/movie_list.2664de5b6a957fb9338937a4ae73abe2.css，则php的style需要能找到/css/movie/movie_list.xxx.css或/css/movie/movie_list.css的链接，对应起来）
　　使用正则new RegExp(prevName + '(\w*?)' + '\.(js|css|png|jpg)')替换新文件名。

这里有几个限制：
　　文件路径不能有.
　　php原目录需与生成的目录一致

webpack.config.js引入该plugin
```javascript
const PhpResourceReplacePlugin = require('./src/plugins/php-resource-replace-plugin')
module.exports = {
	plugins: [
		new PhpResourceReplacePlugin(),
	]
}
```

如果觉得有帮忙，您可以在本页底部留言。

Webpack自动更新php静态资源文件名hash

全部留言

我要留言