मैं वेबपैक का उपयोग कर अपने एचटीएमएल, सीएसएस और जेएस पर छवियों को लोड कर रहा हूं।छवि का उपयोग कर रिश्तेदार पथ का उपयोग कर रूट से लोड हो रहा है -> वेबपैक - फ़ाइल-लोडर - एंगुलरज
मेरे कॉन्फ़िग है:
{
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 किसी भी फ़ाइल में छवि का नाम देखें और जेनेरिक पथ छवियों फ़ोल्डर में पाएगा।
सहायता की सबसे सराहना की जाती है !!!
- यह काम नहीं कर रहा है क्योंकि यह सीधे मेरे मामले में 'http: // localhost: 9000/~ images/myImage.png' पर कॉल कर रहा है। – Devendra