replacer-contenthash-webpack-plugin
v1.0.5
Published
Plugin for webpack replaces contenthash
Downloads
2,986
Readme
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
$ npm install replacer-contenthash-webpack-pluginExample
Webpack.config.js
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
<!DOCTYPE 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
<!DOCTYPE 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>