Answer the question
In order to leave comments, you need to log in
How to include images in webpack 5 via asset/resource?
I want images from the src folder to be moved to the dist folder. Now it works if I include images in the scss file, but I also include these images directly in the Php file, and in the Php file I already specify dist/images/image.png.
How to include images in php file?
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset/resource',
generator: {
filename: './images/[name][ext]',
},
},
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
require('./font.config.js')
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {
main: ['@babel/polyfill', '/app.js'],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
watchOptions: {
aggregateTimeout: 200,
poll: 1000,
},
plugins: [
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].css',
}),
new BrowserSyncPlugin({
proxy: 'omedia/',
host: 'omedia/',
snippetOptions: {
ignorePaths: "/wp-admin/**"
},
files: '**/**/**.php',
}),
],
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
require('autoprefixer'),
],
},
},
},
],
},
{
test: /\.s[ac]ss$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
require('autoprefixer'),
],
},
},
},
"sass-loader",
],
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset/resource',
generator: {
filename: './images/[name][ext]',
},
},
{
test: /\.(ttf|woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: './fonts/[name][ext]',
},
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question