7

मैं वेबपैक का उपयोग कर अपने एचटीएमएल, सीएसएस और जेएस पर छवियों को लोड कर रहा हूं।छवि का उपयोग कर रिश्तेदार पथ का उपयोग कर रूट से लोड हो रहा है -> वेबपैक - फ़ाइल-लोडर - एंगुलरज

मेरे कॉन्फ़िग है:

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

मेरी परियोजना फ़ोल्डर संरचना:

- 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 

मैं सिर्फ HTML, सीएसएस और जे एस (छवि स्थान जे एस में कम से कम) से चित्रों को शामिल उल्लेख करने के लिए चाहते हैं, लेकिन सभी वर्तमान मेरे छवि पथ छवि फ़ोल्डर से संबंधित टेम्पलेट फ़ाइल के सापेक्ष हैं।

इस मामले में, प्रत्येक HTML और JS फ़ाइल के लिए पथ कॉन्फ़िगर करना नरक की तरह है।

तो मेरी qustions है: मेरे पास सामान्य पथ कैसे हो सकता है ताकि HTML, JS या CSS- I किसी भी फ़ाइल में छवि का नाम देखें और जेनेरिक पथ छवियों फ़ोल्डर में पाएगा।

सहायता की सबसे सराहना की जाती है !!!

उत्तर

4

ठीक है - मैंने यह पता लगाया है कि सामान्य छवियों को कैसे सेट अप किया जाए ताकि छवियों को आपके प्रोजेक्ट में किसी भी HTML, JS या CSS से लोड किया जा सके और केवल हर उदाहरण पर एक ही सार्वजनिक पथ देने की आवश्यकता हो।

  1. Webpack.config.js फ़ाइल में, हम केवल नए प्लगइन्स

    new CopyWebpackPlugin([{ 
        from: './src/images', 
        to: 'images' 
    }]), 
    
  2. जोड़ने के लिए Webpack.config.js में की जरूरत है - हम सेटअप की जरूरत है:

    परिवर्तन की जरूरत है वह यह है कि उत्पादन खंड में publicPath के रूप में:

    output: { 
          path: path.join(__dirname, 'mcaid'), 
          filename: 'bundle.js', 
          publicPath: '/',  <----- this is been added 
    }, 
    
  3. एचटीएमएल, जे एस या सीएसएस फ़ाइल में, आप कर सकते हैं refe आर की तरह छवियों:

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

/छवियों src में है - '/' publicPath और 'छवियों' है या 'देव' और 'जिले' से 'चित्र' के लिए स्रोत फ़ोल्डर से छवियों 'प्रोड' बिल्ड।

1

प्रयास करें अपनी संपत्ति के लिए एक उपनाम परिभाषित करने के लिए resolve.alias संपत्ति का उपयोग करने,:

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

आपका सीएसएस-लोडर:

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

तो फिर तुम जैसे एचटीएमएल में अपनी छवियों को संदर्भित करने के लिए सक्षम होना चाहिए (या एचटीएमएल लोडर, मुझे इसके बारे में बिल्कुल यकीन नहीं है) तो सही पथ को हल करेगा।

संपादित

संपादित इस तरह सीएसएस लोडर:

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

इस भूल। यूआरएल = झूठा पैरामीटर सीएसएस लोडर को सीधे यूआरएल को संभालने के लिए नहीं बताता है।

+0

- यह काम नहीं कर रहा है क्योंकि यह सीधे मेरे मामले में 'http: // localhost: 9000/~ images/myImage.png' पर कॉल कर रहा है। – Devendra

संबंधित मुद्दे