I have my scss and my images in folders at the same level.
File structure
styles
app.scss
images
my-image.jpg
Am trying to import my image like so
app.scss
body {
background: url(../images/my-image.jpg);
}
I have a simple webpack configuration to load scss and images.
webpack.config.js
const path = require("path");
module.exports = {
entry: "./resources/index.js",
resolve: {
alias: {
resource: path.resolve(__dirname, "resources/images"),
},
},
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "/dist",
filename: "main.js",
assetModuleFilename: "[name][ext][query]",
clean: true,
},
mode: "production",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.scss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|jpg)/,
type: "asset",
},
],
},
};
Later on I tried to use resolve-url-loader between css-loader and scss-loader which seemed promising. But also to no avail.
The build isn't throwing any errors. But the page doesn't open the image.
Thank you for any help you give me my bros and bronettes.
At the end the problem with the images was simply in the publicPath on the web.config.js file.
Changing it from dist/ to /dist did the job.
const path = require("path");
module.exports = {
...
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "dist/", //This is where the issue was
filename: "main.js",
assetModuleFilename: "[name][ext][query]",
clean: true,
},
...
};
Let this be a warning for all ye who enter webpack.
Related
Below is my webpack.config.js. I'm working on a phaser game with a restAPI. My assets are in a folder off the root. My problem is I compiled with webpack and it changed the code in the boot scene of phaser to look for my assets in 'build/assets'. There is no such folder, so in the browser it's giving me the 404 not found errors. Is there a way to prevent this in the webpack.config? Or should I just copy the assets folder inside the build folder?
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/build/',
filename: 'project.bundle.js',
},
module: {
rules: [
{
test: /\.m?js$/,
use: { loader: 'babel-loader' },
exclude: /node_modules/,
},
{
test: [/\.vert$/, /\.frag$/],
use: 'raw-loader',
},
],
},
plugins: [
new webpack.DefinePlugin({
'CANVAS_RENDERER': JSON.stringify(true),
'WEBGL_RENDERER': JSON.stringify(true),
}),
],
};
I'm using Webpack 4 for Wordpress theme development. I have configured my webpack.config.js to extract css from js files and load them in separate files. But the styles are not getting loaded, either as or as separate css file.
webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
context: __dirname,
entry: {
userSide: "./js/public.js",
adminSide: "./js/admin.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js"
},
mode: "development",
devtool: "source-map",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
use: [
{
loader: "file-loader",
options: {
outputPath: "dist/images",
name: "[name].[ext]"
}
}
]
},
{
test: /\.s?css$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css"
})
]
};
The css files are being created in the local directory whenever I run npm run dev but not showing changes in the website.
Please help
This is how I config my webpack
You can use my setting to see if it work for you
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
Add to plugins section:
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
And rules section
{
"test":"/\\.scss$/",
"use":[
"style-loader",
"MiniCssExtractPlugin.loader",
{
"loader":"css-loader",
"options":{
"minimize":true,
"sourceMap":true
}
},
{
"loader":"sass-loader"
}
]
},
Also you may need to inject css to your html using HTML Webpack plugin
I've got a little API App built with Webpack. To publish it on GitHub Pages I've installed the npm package gh-pages.
Everything works fine, the dist-folder is pushed correctly and when I open the live-version the index and scss files are displayed as well.
The problem now is that my bundle.js doesn't load. So the whole functionality is not active. Another thing I've discovered is that my media queries doesn't pop in as well.
Would be great if anyone could help me fixing that issue!
My Repository:
https://github.com/jeanmarc5592/Cocktail-API-Project
My webpack.config.js File:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const multi = require('multi-loader');
module.exports = {
entry: ['babel-polyfill', './src/js/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: {
loader: multi('style-loader!css-loader!sass-loader')
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
],
},
],
},
};
When I run my "webpack -p" my dist folder gets created and the image loaded with file-loader loads into the page correctly. When I run webpack-dev-server the image is the only thing that doesn't load correctly. I can't figure out what I am doing wrong.
Here is my config file:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.tsx',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
],
},
{
test: /\.html$/,
use: ['html-loader']
},
{
test: /\.(pdf|jpg|png|gif|svg|ico)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '/img/', //Just to place it in a folder
publicPath: '/img/'
}
}
]
}
]
},
mode: 'development',
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
})
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist/'),
}
};
My folder structure looks like this: (No idea how to make a more visual structure)
|-node_modules
|-src
|- components
|- img
|- image.png
|- styles
index.html
index.tsx
package.json
tsconfig.json
webpack.config.json
Any ideas would be greatly appreciated. I am still new to web-pack.
file-loader's outputPath should be relative:
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/', // file pack output path, is relative path for `dist`
publicPath: '/img/', // css file will use, is absolute path for server
}
i'm planning to use webpack instead of gulp. I'm using MEAN stack, I am using AngularJs for front end.
My webpack.config.js:
const path = require('path');
module.exports = {
mode: 'development',
entry: './public/js/controllers.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
devServer: {
port: 3000,
open: true,
proxy: {
'/': 'http://localhost:8080',
},
},
};
In this configuration i am bundling only controller.js, but i need to bundle whole folders which is inside in public directory, is it possible?
Suppose you have two different js files(controller1.js, controller2.js) which you wish to include in index.html.
Your webpack.config.js will have entry as -
entry : ['./public/js/controller1.js', './public/js/controller2.js']
Both the controllers will be processed fine by webpack.