underscore-template-loader
underscore-template-loader copied to clipboard
Possible to support hash suffix of img's path?
I want to have hash suffix of img path after webpack build, but I don‘t know how to config. I can only get the background images have hash suffix, but the can't. How can I let the
path has the hash suffix? Please help me. Here is my webpack config:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpack = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const config = require('./src/config/index.js');
const htmlPlugin = new HtmlWebpackPlugin({
template: './src/index.ejs',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: './src/main.js',
output: {
filename: '[name].[hash:8].js',
path: path.resolve(__dirname, './dist/'),
},
devServer: {
contentBase: path.join(__dirname, '/src/'),
// compress: true,
inline: true,
port: 9000,
},
module: {
rules: [
{
test: /\.ejs$/,
loader: 'underscore-template-loader',
query: {
attributes: []
}
},
{
test: /\.(png|jp?g|gif)$/,
loader: 'url-loader',
options: {
limit: 8192,
name: config.assetsSubDirectory + '/image/[name].[ext]',
}
},
{
test: /\.ttf$/,
loader: 'url-loader',
options: {
limit: 8192,
name: config.assetsSubDirectory + '/font/[name].[ext]',
}
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'less-loader'
]
}
]
},
plugins: [
htmlPlugin,
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash:8].css',
}),
new CopyWebpack([
{ from: __dirname + '/src/assets', to: __dirname + '/dist/assets' },
]),
new CleanWebpackPlugin()
]
};
This is not business for underscore-template-loader, you should config in url-loader:
{
test: /\.(png|jp?g|gif)$/,
loader: 'url-loader',
options: {
limit: 8192,
name: config.assetsSubDirectory + '/image/[name].[hash:8].[ext]',
}
},