Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible to support hash suffix of img's path? #38

Open
OwnGhy opened this issue Dec 16, 2019 · 1 comment
Open

Possible to support hash suffix of img's path? #38

OwnGhy opened this issue Dec 16, 2019 · 1 comment

Comments

@OwnGhy
Copy link

OwnGhy commented Dec 16, 2019

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()
    ]
};
@snoleo
Copy link

snoleo commented Mar 15, 2020

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]',
    }
},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants