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"
}
};
Related
I have a webpack config file(version 5.28.0) that I am trying to alter, in order to create two versions of the user.js file that is generated. I'd like a user.js and legacy_user.js file to be generated. Both files I would like to be generated from the contents of the 'scripts/user' directory, with the exception of I'd like the user.js file to compile excluding the legacy_user.js file that is in the 'scripts/user' directory and the legacy_user.js file to compile excluding the user.js file that is in the 'scripts/user' directory. I have tried the below but the contents of the user.js file keeps overwriting the contents of the legacy_user.js file and they end up being identical:
module.exports = (options = {}) => {
return [
{
mode: options.production ? 'production' : 'development',
entry: {
app: path.resolve(__dirname, 'scripts/app'),
user: path.resolve(__dirname, 'scripts/user'),
'video/trim': path.resolve(__dirname, 'scripts/video/trim')
},
output: { path: path.resolve(__dirname, '../public_html/dist') },
module: {
rules: [
{
test: /\.js$/,
exclude: [/(node_modules)/, /legacy_user\.js$/],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}, {
test: /\.(s[ac]ss|css)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /\.(png|jpg|woff(2)?|ttf|eot|svg)$/, loader: 'file-loader' }
]
},
},
{
mode: options.production ? 'production' : 'development',
entry: {
legacy_user: path.resolve(__dirname, 'scripts/user')
},
output: {
path: path.resolve(__dirname, '../public_html/dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: [/(node_modules)/, /user\.js$/],
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}, {
test: /\.(s[ac]ss|css)$/i,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{ test: /\.(png|jpg|woff(2)?|ttf|eot|svg)$/, loader: 'file-loader' }
]
},
}
]
}
Any help on this would be greatly appreciated!
I need help with my webpack.
Currently I have a simple structor but doesn't load the css into the public folder
instead loads 2 inline tags.
My Issue is:
the public folder as a index.html with two css with for some reason the get duplicated with my bundle.js.
How do I set a normal css in there?
Surely my webpack is wrong.
I'm using react and I have a sass folder with all scss files.
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: ["./src/index.js"],
mode: "development",
module: {
rules: [{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
sideEffects: true,
},
{
// Images
test: /\.(png|svg|jpg|gif)$/,
use: {
'loader': 'file-loader',
'options': {
'name': "[name].[ext]",
'outputPath': 'assets/images/'
}
}
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
},
},
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: {
presets: ["#babel/env"]
}
}
],
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
output: {
path: path.resolve(__dirname, "public/"),
publicPath: "/public/",
filename: "bundle.js"
},
devServer: {
historyApiFallback: true,
contentBase: path.join(__dirname, "public/"),
port: 3000,
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src", "pages/index.html")
})
]
};
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: {},
},
]
}
};
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
}
}
})
]
}
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"
},