I am recently learning React and have problem setting webpack. I wrote a background image in sass file but I can't see this image in browser, I checked the develope tool and saw a strange file name as the attatched picture shows. There's no error when I run webpack. I think I might set the webpack.config.js incorrectly. Can somebody take a look for me? here's the source code:
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'eventsource-polyfill',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.sass$/,
loader: 'style!css?sourceMap!sass'
},
{
test: /\.(jpg|gif|png)$/,
loader: "file"
},
{
test: /\.(jpg|gif|png)$/,
loader: "url"
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
filename: 'index.html',
inject: 'body',
})
]
};
I also put my files on github: https://github.com/john650914/ReactQuestion.git
Thank you very much~~~~~~~~~
Webpack will start looking for your url path at '/' which was set by your publicPath in your webpack.config.js
Looking at your repository with your link provided:
https://github.com/john650914/ReactQuestion.git
It seems like your image isn't in your projects root. You should specify the correct publicPath that leads to where you store your assets. So for example if you stored your images in /src/assets/ then your publicPath should be ./src/assets/ like this:
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: './src/assets/'
},
Related
first and foremost I need to say that I know little of fundamentals of Webpack, and this is probably why I can't find a solution.
So I know in order to load images I need to require a path instead of just typing it as a string require('path/to/image')
Then I got an external library where I need to pass a path property, where lay multiple images. It doesn't seem to work, so how can I load them into my website?
<CountrySelect
multi={false}
flagImagePath="../../../public/flags/" //folder with multiple images
/>
Webpack config:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
entry: './src/client/index.js',
output: {
path: path.join(__dirname, outputDirectory),
filename: 'bundle.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg|jpg|jpeg)$/,
loader: 'url-loader?limit=100000'
}
]
},
devServer: {
historyApiFallback: true,
port: 3000,
open: true,
proxy: {
'/api': 'http://localhost:8080'
}
},
plugins: [
new CleanWebpackPlugin([outputDirectory]),
new HtmlWebpackPlugin({
template: './public/index.html',
favicon: './public/favicon.ico'
})
]
};
image-webpack-loader - automatically reduces/compress the bigger image.
url-loader - if image size is small it will included as part of bundle.js otherwise separate directory is created and images are placed inside of it.
npm install --save-dev image-webpack-loader url-loader file-loader
webpack.config.js
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
publicPath: 'build/' //This is important to load your images.
},
module: {
rules: [
{
test: /\.js$/,
use: [
{ loader: 'babel-loader' },
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: 'url-loader',
options: { limit: 40000 } //if image of size lessthan 40kb include it in bundle.js
},
'image-webpack-loader'
]
}
]
}
}
Sample Code.
import big from '../images/big.jpg';
import small from '../images/small.png';
const image = document.createElement('img');
image.src = small;
document.body.appendChild(image);
const bigimage = document.createElement('img');
bigimage.src = big;
document.body.appendChild(bigimage);
you can learn more about webpack from Handling Images with Webpack.
I solved the problem by using CopyWebpackPlugin.
plugins: [
new CleanWebpackPlugin([outputDirectory]),
new HtmlWebpackPlugin({
template: './public/index.html',
favicon: './public/favicon.png'
}),
new CopyWebpackPlugin([{ from: './public/flags', to: 'flags', toType: 'dir'
}]),
]
and in CountrySelect:
flagImagePath="/flags/"
So that in the time of production, where static directory is dist, flags are derived from dist directory.
I am facing error while getting same bundled image from different route
While my app is in route http://localhost:8080
My image load perfectly from url http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg
But as my app route changed to http://localhost:8080/dashboard
My image also loads from url http://localhost:8080/dashboard/3e8b0bc82f581817994bbe9e9396170b.jpg
Since the image is at url location http://localhost:8080/3e8b0bc82f581817994bbe9e9396170b.jpg
So it shows 404 resource not found error while getting the resources from the given location.
I am using require('../image.jpg') to add image in my app.
This is my webpack.config.js file.
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react', "env"]
}
},
{ test: /\.(png|jpg|svg)$/i, loader: "file-loader",
options:{outputPath:'images/'}},
{test:/\.json?$/,loader:'json-loader'}
],
},
devServer: {
historyApiFallback: true,
contentBase: './public',
hot:true
},
devtool:"cheap-module-eval-source-map"
}
I am using webpack version: "^3.1.0".
I'm trying to set up a developer environment for React but I'm getting some issues with webpack pathing. Usually, a quick google solves issues like these but I haven't seen anyone with the same problem, which probably means I'm an idiot and is messing something up.
So, I followed a tutorial and I have a dev-folder and a output-folder. In output I have output.js, where I want webpack to output all my stuff. So, according to the guide, I should run ./node_modules/.bin/webpack and it should work with the config I have, but it's showing the wrong filepath. I want it to go to react-test/output/output.js but it's throwing in a /dev, making it react-test/dev/output/output.js. My webpack.config.js looks like this:
var webpack = require("webpack");
var path = require("path");
var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");
var config = {
entry: DEV + "/index.jsx",
output: {
path: OUTPUT,
filename: "output.js"
},
module: {
loaders: [{
include: DEV,
loader: "babel-loader"
}]
}
};
module.exports = config;
I can't see where dev is getting added.
I would modify the file to the following:
var path = require('path');
module.exports = {
entry: path.join(__dirname, '/dev/index.js'),
output: {
path: path.join(__dirname, '/output'),
filename: 'output.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
}
};
You don't need to require webpack in this file, but you do need to tell the module loader what to test. The presets I included are assuming you are using ReactJS and ES6, you may need to change them as appropriate.
webpack.config
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './dev/index.js',
output: {
path: path.resolve(__dirname, 'output'),
filename: 'output.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
devServer: {
historyApiFallback: true
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/Index.html' // Copy Index.html with script tag refrencing output.js in Output folder
})
]
}
Try to set context option to react-test directory.
And set DEV and OUTPUT paths realtive to it:
var DEV = path.resolve(__dirname, "./dev");
var OUTPUT = path.resolve(__dirname, "./output");
var config = {
context: path.resolve(__dirname, './'),
entry: DEV + "/index.jsx",
output: {
path: OUTPUT,
filename: "output.js"
},
...
I have the following config for my webpack:
var path = require('path');
var webpack = require('webpack');
var config = {
entry: {
login: path.join(__dirname, 'src' , 'entry' , 'login.js'),
register: path.join(__dirname, 'src', 'entry', 'register'),
faqLogged: path.join(__dirname, 'src', 'entry', 'faqLogged'),
content: path.join(__dirname, 'src', 'entry', 'content'),
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js',
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
]
},
}
module.exports = config;
In my app I use AJAX and I ought use babel-loader. The problem is, if I use the cdnjs for babel-loader, and therefore no import statements in my app, the page loads almost instantly.
On the other hand, if I use webpack to bundle my page, now being able to use import, and doing so, will result in my page load time being over 4 seconds and I receive the following error in my browser's console ( Chrome ) :
[BABEL] Note: The code generator has deoptimised the styling of "http://localhost/build/content.js" as it exceeds the max of "100KB".
I have tried to minify the bundled file but that does not seem to be the issue. The fact that it has over 100kb doesn't bother me, what does is the absurd load time.
I am facing this strange issue with Webpack. After spending hours couldn't find solution.
In my jsx file when I a try to set image source via this
let img = require('../../../img/imgN.png');
It is working perfectly but when I try to set the background image using scss via
$bg-img: url('../img/bg-img.png');
Image is not getting loading by webpack.
This is my webpack file
module.exports = {
devtool: 'source-map',
entry: {
main: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
]
},
output: {
path: path.join(__dirname, 'public'),
publicPath: '/public/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.join(__dirname, 'src'),
loader: 'react-hot!babel'
},
{
test: /\.scss$/,
include: path.join(__dirname, 'sass'),
loaders: ["style", "css?sourceMap", "sass?sourceMap"]
},
{
test: /\.(png|jpg)$/,
include: path.join(__dirname, 'img'),
loader: 'url-loader?limit=30000'
} // inline base64 URLs for <=30k images, direct URLs for the rest
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
}
Problem was occurring because of using sourceMap with style-loader.
There is some issue on github for the same problem.
Solution:
1 . While source-maps is enabled
Style-loader uses a Blob, so it requires absolute urls to work.
Changed publicPath: '/public/', to
publicPath: 'http://localhost:8080/public/',
It worked.
Without source-maps
Just remove source map from style loaders.
Now style-loader will use an inline style tag, so there is no problem.
{
test: /\.scss$/,
include: path.join(__dirname, 'sass'),
loaders: ["style", "css", "sass"]
},
Can you try to see if $bg-img: url('~/img/bg-img.png'); would work? When I was trying out webpack in my bootstrap.scss files I had to modify the font url's using ~ (I think I read it somewhere but ya just giving you something to try)