replacer-contenthash-webpack-plugin
Version:
Plugin for webpack replaces contenthash
115 lines (94 loc) • 2.97 kB
Markdown
Replacer Contenthash Webpack Plugin
================================
This plugin is designed to add for your static files such as css, js, images, svg-sprite contenthash.
Its main purpose is processing links to your file and generating contenthash.
**Tip**: For work you need to install the plugin "loader-utils".
## Installation
```shell
$ npm install replacer-contenthash-webpack-plugin
```
## Example
### Webpack.config.js
```javascript
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ReplacerContenthashWebpackPlugin = require('replacer-contenthash-webpack-plugin');
module.exports = {
entry: {
vendor: ['./src/vendor.js']
},
output: {
path: path.join(__dirname, 'dist/build'),
filename: '[name].js',
publicPath: '/static/',
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('[name].css'),
new ReplacerContenthashWebpackPlugin({
// Path to the folder with the files that will be replaced
filesDir : ["src"],
// List of files to be replaced
files : ["src/vendor.js, src/vendor.css", "src/vendor.rtl.css", "src/images.png", "src/svg-sprite.svg"],
// Path to a specific template
templates : ["templates/index.html"],
// Folder in which will search for templates
templatesFolder : ["templates"]
}),
// OR
new ReplacerContenthashWebpackPlugin({
files : ["src/vendor.js, src/vendor.css", "src/vendor.rtl.css", "src/images.png", "src/svg-sprite.svg"],
templates : ["templates/index.html"],
}),
// OR
new ReplacerContenthashWebpackPlugin({
filesDir : ["src"],
templatesFolder : ["templates"]
}),
]
};
```
### HTML
```html
<html lang="en">
<head>
<link href="/build/vendor.css" rel="stylesheet">
<link href="/build/vendor.rtl.css" rel="stylesheet">
</head>
<body>
<img src="/src/images.png"/>
<svg class="svg-icon svg-icon-visa">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="build/svg-sprite.svg#visa"></use>
</svg>
<script src="/build/vendor.js"></script>
</body>
</html>
```
### Output
```html
<html lang="en">
<head>
<link href="/build/vendor.df21fce15a0bf0d48b1c3c7a0be4d06c.css" rel="stylesheet">
<link href="/build/vendor.rtl.df21fce15a0bf0d48b1c3c7a0be4d06c.css" rel="stylesheet">
</head>
<body>
<img src="/src/images.9f6dd77d90580f8ab54b517852ff0b72.png"/>
<svg class="svg-icon svg-icn-visa">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="build/svg-sprite.6fd910b6a5490645684a504075d829ce.svg#visa"></use>
</svg>
<script src="/build/vendor.9f6dd77d90580f8ab54b517852ff0b72.js"></script>
</body>
</html>
```