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