I'm making a module that I have to test through the third party site.
everything works fine except the Webpack
won't build any image files that I add inside the .js
files. I can't import the images because there is too many and they are being selected by a variable. I can't figure out why the images won't build.
I have also tried file-loader and url-loader, nothing works.
The return in the react file
return (<div><img src="/src/images/screenshot.png" /></div> )
Here is the config:
module.exports = {
mode: isProd ? "production" : "development",
entry: "./src/index.js",
module: {
rules: [
{ test: /.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|mp3|pdf|webm|txt)$/i, use: [ { loader: "file-loader", }, ], }, { test: /.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|mp3|pdf|webm|txt)$/, type: "asset/resource", generator: { filename: "static/chunks/[path][name].[hash][ext]", }, },
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
plugins: [
"syntax-dynamic-import",
"transform-react-jsx",
],
},
},
},
{
test: /\.(css|scss|sass)$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
plugins: [
new webpack.DefinePlugin({
__PUBLIC_PATH__: JSON.stringify(publicPath),
}),
],
output: {
filename: "[name].js",
chunkFilename: "[name].chunk.js",
path: buildPath,
publicPath,
},
devServer: {
static: {
directory: buildPath,
watch: true,
},
historyApiFallback: true,
headers: {
"Access-Control-Allow-Origin": "*",
},
client: {
logging: "log",
reconnect: false,
webSocketURL: "ws://localhost:8080",
},
},
};
For images to be processed by webpack, you should use file-loader
Install it with $ npm install file-loader --save-dev
.
Then add this rule to your webpack config:
rules: [
{
test: /\.(jpe?g|png|svg|gif|ico|eot|ttf|woff|woff2|mp4|mp3|pdf|webm|txt)$/i,
use: [
{
loader: 'file-loader',
},
],
},
],
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.