webpack dev serve from assets

Question

I took a starter kit of vue + element-ui. I added vue-router, vuex, typescript and tslint.

When I run the dev server I can see it loads my image from assets but it changes the image name from logo.png -> 82b9c7a5a3f405032b1db71a25f67021.png

I search a lot on line, tried to work with CopyWebpackPlugin but I can't make this work.

I want the file name to stay as is. I have some images' local src which comes from service response and now the path doesn't match as webpack changes the name to random guid.

Below is the actual code, browser output and webpack.config.js

Any help would be appreciated.

webpack.config.js

const resolve = require('path').resolve;
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const url = require('url');
const publicPath = '';

module.exports = (options = {}) => ({
    entry: {
        vendor: './src/vendor',
        index: './src/main.ts'
    },
    output: {
        path: resolve(__dirname, 'dist'),
        filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
        chunkFilename: '[name].js?[chunkhash]',
        publicPath: options.dev ? '/assets/' : publicPath
    },
    module: {
        rules: [{
            test: /\.vue$/,
            use: ['vue-loader']
        },
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader: "ts-loader",
                options: {
                    appendTsSuffixTo: [/\.vue$/]
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader",
                    options: {
                        includePaths: ["absolute/path/a", "absolute/path/b"]
                    }
                }]
            },
            {
                test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1
                    }
                }]
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ])
    ],
    resolve: {
        alias: {
            '~': resolve(__dirname, 'src')
        },
        extensions: ['.ts', '.js', '.vue', '.json']
    },
    devServer: {
        host: '127.0.0.1',
        port: 8010,
        proxy: {
            '/api/': {
                target: 'http://127.0.0.1:8080',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        },
        historyApiFallback: {
            index: url.parse(options.dev ? '/assets/' : publicPath).pathname
        }
    },
    devtool: options.dev ? '#eval-source-map' : '#source-map'
})

Gal Ziv Gal Ziv · Accepted Answer · 2018-02-06T13:43:48

The answer lays in the vue template documentation. The static assest should be in /static directory and should be referenced using '/static/img.png' for example. vue template documentation

webpack dev serve from assets

1 Answers