I'm loading images on my HTML, CSS and JS using Webpack.
My Config is :
{
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;
}
my Project Folder Structure :
- 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
I just want to refer include images from HTML, CSS and JS (Image location atleast in JS) but currently all my image paths are relative to image folder to template file.
In this case, configuring path for every single HTML and JS file is like hell.
so my qustions is : How can I have generic path so that in HTML, JS or CSS- I'll just refer image name in any file and generic path will find that out in images folder.
Help is most appreciated !!!
I'm loading images on my HTML, CSS and JS using Webpack.
My Config is :
{
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;
}
my Project Folder Structure :
- 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
I just want to refer include images from HTML, CSS and JS (Image location atleast in JS) but currently all my image paths are relative to image folder to template file.
In this case, configuring path for every single HTML and JS file is like hell.
so my qustions is : How can I have generic path so that in HTML, JS or CSS- I'll just refer image name in any file and generic path will find that out in images folder.
Help is most appreciated !!!
Share Improve this question edited Nov 21, 2017 at 23:34 Enigma asked Nov 16, 2017 at 11:46 EnigmaEnigma 8591 gold badge18 silver badges36 bronze badges2 Answers
Reset to default 7Try to use the resolve.alias property, to define an alias to your assets:
resolve: {
alias: {
images: path.resolve(__dirname, 'src/images')
}
},
Then you should be able to reference your images in Html like:
<img src="~images/some_image.png" alt="image alt text" />
Your css-loader (or html-loader, I am not quite sure about that) will then resolve the correct path.
EDIT
Edit the css loader like this:
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [
{loader: 'css-loader?url=false'}
]
})
Forgot this. the url=false parameter tells the css-loader not to handle urls directly.
Ok - I've figured it out that how to setup mon images path so images can be loaded from any HTML, JS or CSS in your project and just need to give same public path at every instance.
Changes needed is that :
In Webpack.config.js file, We need to add new Plugins
new CopyWebpackPlugin([{ from: './src/images', to: 'images' }]),In Webpack.config.js only - We need to setup publicPath in output section as :
output: { path: path.join(__dirname, 'mcaid'), filename: 'bundle.js', publicPath: '/', <----- this is been added },In HTML, JS or CSS File, you can refer images like :
<img src="/images/some_Image_file.png"/>
/images in src is -- '/' is publicPath and 'images' is images from src folder for 'dev' and 'images' from 'dist' for 'prod' build.