Göreli yol kullanarak göreli yol kullanarak resim yükleme -> webpack - dosya yükleyici - Angularjs

Question

Web paketini kullanarak görüntüleri HTML, CSS ve JS'ye yüklüyorum.

Benim Yapılandırma geçerli:

{ 
var path = require('path'); 
var webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

var config = { 
    entry: [ 
     'angular', './src/lib.js', './src/app.js', 
    ], 
output: { 
    path: path.join(__dirname, 'dist'), 
    filename: '[name].js', 
}, 
module: { 
    rules: [{ 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loader: ['file-loader?name=[name].[ext]&outputhPath=images/&publicPath=images/'], 
    },{ 
     test: /\.css|scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: ['css-loader'] 
     }) 
    },{ 
     test: /\.html$/, 
     exclude: [ 
      path.join(__dirname, '/src/index.html') 
     ], 
     use: [ 
      { loader: 'ngtemplate-loader?relativeTo=' + (path.resolve(__dirname, './src'))}, 
      { loader: 'html-loader'}, 
      ] 
     }], 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin({ 
      title: 'Project Demo, 
      minify: { 
       collapseWhitespace: true, 
      }, 
      cache: true, 
      hash: true, 
      inject: true, 
      filename: './index.html', 
      template: 'src/index.html' 
     }), 
     new ExtractTextPlugin({ 
      filename: "app.css", 
      disable: false, 
      allChunks: true 
     }) 
    ], 
    devServer: { 
     port: 9000 
    }, 
}; 

    module.exports = config; 
} 

benim Proje Klasör Yapısı: Sadece HTML, CSS ve JS (en az JS Görüntü konumu) görüntüleri dahil başvurmak istiyorum

- dist 
    - images [folder] 
    - index.html 
    - app.css 
    - main.js 
- node_modules 
- src 
    - images 
    - javascripts/pages/HTML Files 
    - stylesheets 
    - app.js (BootStrapping angular) 
    - lib.js 
    - index.html 
- webpack.config.js 
- package.js 

ama şu anda tüm görüntü yollarım resim klasörüne şablon dosyasına göre.

Bu durumda, her bir HTML ve JS dosyası için yapılandırma yolu cehennem gibidir.

yani benim qustions geçerli: Ben sadece görüntüleri klasöründe olduğunu göreceksiniz herhangi bir dosya ve jenerik yolundaki görüntü adını tavsiye edeceğiz HTML, JS veya CSS- o yüzden jenerik yoluna sahip olabilir nasıl.

Yardım en çok takdir!

Answer 1

Tamam - Ben resimlerin herhangi bir HTML, JS veya CSS yüklenebilir ve sadece her durumda aynı kamu yolu vermek gerekir böylece ortak görüntü yolu nasıl kurulduğunu anladım.

Webpack.config.js dosyasında

1. Biz sadece Webpack.config.js yılında yeni Plugins

   new CopyWebpackPlugin([{ 
       from: './src/images', 
       to: 'images' 
   }]), 
   

2. eklemeniz gerekir - Tuzakla gerekir: gerekli

   değişiklikler olmasıdır çıktı bölümünde publicPath olarak:

   HTML, JS veya CSS Dosya

   output: { 
         path: path.join(__dirname, 'mcaid'), 
         filename: 'bundle.js', 
         publicPath: '/',  <----- this is been added 
   }, 
   

3. , sen Refe yapabilirsiniz r gibi görüntüler:

   <img src="/images/some_Image_file.png"/> 
   

/görüntülerde src olduğunu - '/' publicPath ve 'images' olduğunu 'dev' ve 'dist' dan 'görüntüler' için için src klasöründen görüntüleri 'eşya' inşa et.

Answer 2

deneyin varlıklarınız için bir takma ad tanımlamak için, resolve.alias özelliğini kullanmak için:

<img src="~images/some_image.png" alt="image alt text" /> 

Sizin css-yükleyici:

resolve: { 
    alias: { 
    images: path.resolve(__dirname, 'src/images') 
    } 
}, 

Sonra gibi Html resimlerinizi başvurmak gerekir (ya da html-loader, bu konuda tam olarak emin değilim) daha sonra doğru yolu çözecektir.

DÜZENLEME

düzenle böyle css yükleyici:

use: ExtractTextPlugin.extract({ 
    fallback: "style-loader", 
    use: [ 
    {loader: 'css-loader?url=false'} 
    ] 
}) 

bu unutmuşum. url = false parametresi, css-loader'a doğrudan url'leri işlememesini söyler.