I am using webpack2 (I am very new to it) in a react app.
Everything works fine when I am loading images inside the app, via the img tag. But I cannot have it working when using the image as background url inside the css.
this is my webpack:
`module.exports = {
devtool:isDev ? 'cheap-module-eval-source-map' : 'source-map',
entry: [
'react-hot-loader/patch',
'webpack-hot-middleware/client',
'./src/index.js'
],
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
use: [
{
loader: 'babel-loader',
options: {
babelrc: false,
presets: [
['es2015', {modules: false} ],
'react',
'stage-2'
],
plugins: ['react-hot-loader/babel']
}
}
]
},
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
failOnWarning: true,
failOnError: true
}
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpe?g|gif|ico)$/,
use: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?prefix=assets/[name].[hash].[ext]&limit=10000&mimetype=image/svg+xml'
},
]
},
devServer: {
contentBase: './dist',
hot: true
}
};`
I am using express js as a server, but I think this is not relevant for the problem.
Then in my css file I have
background: url('/assets/logo.svg');
If I change the path I get an error but if I use the absolute path there is no error, the network tab returns 304 but if I go to localhost/assets/logo.svg it just reload the page and the logo is not loaded.
I have searched in many SO questions but I cannot figure out what is not working on my code.
In your css you are referring to "/assets/logo.svg". I guess this is the public path served by your server.
You have to load the image from the relative path, the path where is your file.
If you have your image in "assets/logo.svg" then you would have to use this url.
background: url('assets/logo.svg');
Where assets is the folder where your image is.
It looks like a problem in your webpack-dev-server config. For example, devServer.contentBase should be an absolute path:
output: {
publicPath: '/',
path: __dirname + "/dist",
filename: "[name].js"
},
Related
I bumped into the issue that react-router doesnt work with webpack4. webpack 4 cant build components in I think my webpack config is something wrong, however I couldn't figure out how to fix my setting.
these are screenshot of the website on webpack-dev-server and the one after build.
module.exports = {
devServer: {
contentBase: './dist',
open: true,
port: Port,
compress: true,
publicPath: '/',
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.s[ac]ss/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader'],
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: './index.html',
filename: './index.html',
}),
],
resolve: {
extensions: ['.js', '.jsx'],
},
};
build website as same as webpack-dev-server's
I'm writing a TypeScript application using Webpack and file-loader for serving images and audio. I can't get the webpack config to work with audio files.
Im getting GET http://localhost:8080/media/d.mp3 404 (Not Found)
The images work fine on the dev server and also build fine with the webpack setup below.
Folder structure:
|-public
|---audio
|---images
|-src
|---audio
|---images
Same result if I combine all extensions into one string and use a single folder.
My webpack.config.js:
const path = require('path');
module.exports = {
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, 'public/scripts'),
filename: 'bundle.js'
},
devtool: "source-map",
module: {
rules: [{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(scss|sass|css)$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../images/',
publicPath: 'images/',
useRelativePaths: true
}
}
]
},
{
test: /\.(mp3|wav)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '../audio/',
publicPath: 'audio/',
useRelativePaths: true
}
}
]
},
]
},
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
devServer: {
contentBase: path.resolve(__dirname, 'public'),
publicPath: '/scripts/'
},
node: {
fs: "empty"
}
};
I am trying to load images from local storage but i have tried all options left on stackoverflow but not working yet.Below is the folder structure
And below is the code for file-loader
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[path][name].[hash].[ext]',
},
},
I tried using import Star from '../images/star.svg'; and then <img src={Star} alt="star" /> but getting below error
ERROR in ./client/images/star.svg
Module parse failed: C:\Users\muaz\Desktop\learn-redux - Copy\client\images\star.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
And also tried src={require("../images/star.svg")} and getting same result.But i have already installed file-loader on dev depencies:
My full devServe.js code is
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-hot-middleware/client',
'./client/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [
// js
{
test: /\.js$/,
loaders: ['babel'],
include: path.join(__dirname, 'client')
},
// CSS
{
test: /\.styl$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.css$/,
include: path.join(__dirname, 'client'),
loader: 'style-loader!css-loader!stylus-loader'
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {},
},
]
}
};
I have the following css files:
<link rel="stylesheet" href="style/select.css">
<link rel="stylesheet" href="style/site.css">
and the following webpack config
var path = require("path");
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname + '/dist'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack-loader?verbose=true&warn=true',
options: {debug: true, warn: true},
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
],
noParse: /\.elm$/,
},
devServer: {
inline: true,
stats: { colors: true }
},
resolve: {
mainFields: [ 'main'],
}
};
when I use webpack-dev-server, the in memory file server seems to have the correct css files. However when I call
yarn build
it does not copy the css files in my dist folder and therefore fails to load the css files.
Are you importing the css files in your modules? I think you need to use the ExtractTextWebpackPlugin which extract the css from the js bundle into a separate css file.
This will not work with webpack-dev-server though, so you need to disable the plugin in the configuration that you use for the dev server. There is an option that allows you to do that:
new ExtractTextPlugin({
filename: '[name].css',
disable: true,
}),
Try this config to webpack 4,
For loader:
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: {modules:true, importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssPresetEnv(/* pluginOptions */)
]
} }
]
For plugin section:
new MiniCssExtractPlugin({
filename: '[name].css' }),
This is my webpack.config.js file
I've just done a build with electron-packager for the first time and realized that I'm pointing only the devServer in here.
I've been doing some research but haven't found much that's helpful. I'd love some help as to setting up my Webpack config to hit my production server.
My main issue is I don't really know where to start, i.e. what's important in a webpack prod config vs a dev config. Is it as simple as providing an alternate URL is different bundling of files?
Thanks!
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: {
app: ['webpack/hot/dev-server', './scripts/app.js']
},
output: {
// path: './public/built',
path: path.resolve(__dirname, 'public/built'),
filename: 'bundle.js',
publicPath: 'http://localhost:8080/built/'
},
devServer: {
// contentBase: './public',
contentBase: path.join(__dirname, 'public'),
publicPath: 'http://localhost:8080/built/'
},
module: {
rules: [
{
test: /\.jsx?$/,
enforce: "pre",
loader: "eslint-loader",
exclude: /node_modules/
},
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015', 'stage-3']
}
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
{ test: /\.(ttf|eot|otf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$")),
new webpack.LoaderOptionsPlugin({
options: {
eslint: {
failOnWarning: false,
failOnError: true
}
}
})
]
}