Webpack не упаковывает файлы изображений в vue компонент в производство - PullRequest
0 голосов
/ 10 октября 2019

galleryItem.vue

<script>
props: {
    item: {
        type: Object,
        required: true
    }
},
mounted() {
    let element = this.$refs['myElement'];
    let img = new Image();

    img.onload = function(){
        element.insertBefore(this, element.firstChild);
    }
    img.src = this.item.src;
},
</script>

<style scoped lang="scss">
.gallery-item{
    background: url('../../../assets/img/loading.gif') 50% no-repeat; 
    background-size: 30px 30px;
}
</style>

gallery.vue

_randomItems - это вычисляемая функция, которая рандомизирует данные элементов ()

<template>
    <GalleryItem v-for="item in _randomItems" :item="item" :key="item.id" />
</template>
<script>
data() {
    return {
        items: [
            {
                id: 1,
                backgroundColor: "#480572",
                src: "src/assets/img/someImage.png" ,
            },
            ....
            many more
</script>

webpack.common.js

module: {rules: [
    {
        test: /\.vue$/, 
        use: [{ loader: "vue-loader" }]
    },
    {
        test: /\.(svg|jpeg|jpg|png|gif)$/,
        use: [
            {
                loader: "url-loader"
                options: {
                    limit: 8000,
                    name: "[name].[contentHash].[ext]",
                    outputPath: "assets/img"
                }
            },
            {
                loader: "image-webpack-loader",
                options: {
                    bypassOnDebug: true, disable: true
                }
            }
        ]
    }
]},
plugins: [
    new VueLoaderPlugin()
]

webpack.development.js

module: {rules: [
        {
            test: /\.scss$/,
            exclude: /node_modules/,
            use:[
                "style-loader",
                "css-loader",
                "sass-loader"
            ]
        },
        {
            test: /\.css$/,
            exclude: /node_modules/,
            use:[
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "postcss-loader",
                    options: {
                        ident: 'postcss',
                        plugins: [
                            require('tailwindcss'),
                            require('autoprefixer')
                        ]
                    }
                }
            ]
        }
    ]
},

plugins: [
    new HtmlWebpackPlugin({
        template: "./src/template.html"
    })
]

webpack.production.js

optimization: {
    minimizer: [
        new OptimizeCssAssetsPlugin(),
        new TerserPlugin(),
        new HtmlWebpackPlugin({
            template: "./src/template.html",
            minify: {
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }
        })
    ]
},

module: {rules: [
        {
            test: /\.scss$/,
            exclude: /node_modules/,
            use:[
                {
                    loader: MiniCssExtractPlugin.loader
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "sass-loader"
                }
            ]
        },
        {
            test: /\.css$/,
            exclude: /node_modules/,
            use:[
                {
                    loader: MiniCssExtractPlugin.loader
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "postcss-loader",
                    options: {
                        ident: 'postcss',
                        plugins: [
                        require('tailwindcss'),
                        require('autoprefixer'),
                        ]
                    }
                }
            ]
        }
    ]
},
plugins: [
    new MiniCssExtractPlugin({
        filename: "assets/style/[name].[contentHash].css"
    }), 
    new CleanWebpackPlugin()
]

Когда я запускаю проект, он запускает файл с изображениями в galleryItem, но при запуске build он не копирует изображения впапка dist. Что я делаю не так?

Редактировать: Обе loading.gif, на которые ссылается galleryss_vue scss и которые ссылаются через объект item, предоставленный gallery.vue, не упаковываются в dist

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...