7

Ładowanie obrazów w moim kodzie HTML, CSS i JS przy użyciu pakietu Webpack.Ładowanie obrazu z katalogu głównego przy użyciu ścieżki względnej przy użyciu -> webpack - file-loader - Angularjs

My Config jest:

{ 
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; 
} 

mój Struktura folderów projektu:

- 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 

Chcę tylko zwrócić zawierać obrazy z HTML, CSS i JS (lokalizacja Obrazek conajmniej w JS), ale obecnie wszystko moje ścieżki obrazu odnoszą się do folderu obrazów do pliku szablonu.

W tym przypadku konfiguracja ścieżki dla każdego pliku HTML i JS jest jak piekło.

więc moje qustions jest: Jak mogę mieć ogólną ścieżkę tak, że w HTML, JS lub CSS- będę tylko odnieść nazwę obrazu w dowolnym pliku i generycznych ścieżce przekonają się, że w folderze obrazów.

Pomoc jest najbardziej ceniona !!!

Odpowiedz

4

Ok - Zrozumiałem, jak ustawić wspólną ścieżkę obrazów, aby obrazy mogły być ładowane z dowolnego HTML, JS lub CSS w projekcie i wystarczy podać tę samą publiczną ścieżkę w każdym wystąpieniu.

Zmiany potrzebne jest to, że:

  1. W pliku Webpack.config.js, musimy dodać nowe wtyczki

    new CopyWebpackPlugin([{ 
        from: './src/images', 
        to: 'images' 
    }]), 
    
  2. tylko w Webpack.config.js - Musimy konfiguracji publicPath w punkcie wyjścia jako:

    output: { 
          path: path.join(__dirname, 'mcaid'), 
          filename: 'bundle.js', 
          publicPath: '/',  <----- this is been added 
    }, 
    
  3. w HTML, JS, CSS lub plik, można refe R obrazy, takie jak:

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

/obrazów w Src - '/' jest publicPath i 'obrazów' to obraz z katalogu src dla 'dev' i 'obrazu' z '' dla dist Konstrukcja "prod".

1

Spróbuj użyć właściwości resolve.alias, aby zdefiniować alias do swoich aktywów:

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

Następnie powinieneś być w stanie odwołać swoje obrazy w formacie HTML jak:

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

CSS-ładowarki (lub html-loader, nie jestem do końca pewien) rozwiąże poprawną ścieżkę.

EDIT

Edit ładowarka css tak:

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

pamiętasz tego. parametr url = false mówi programowi css-loader, aby nie obsługiwał bezpośrednio adresów URL.

+0

- to nie działa, ponieważ w moim przypadku wywołuje bezpośrednio do "http: // localhost: 9000/~ images/myImage.png". – Devendra

Powiązane problemy