我一直在努力解决Webpack的问题。我曾尝试在网上到处搜索解决方案,但未能解决我的问题。
我正在构建具有以下项目结构的React应用程序:
package.json
webpack.config.js
src
- images
- components
-- Display
--- Display.js
--- config.js
- Frame
-- Frame.js
index.js
index.html
这里是webpack.config.js
:
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
publicPath: "/"
},
module: {
rules: [
{ test: /\.(js)$/, use: "babel-loader" },
{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: "[name].[ext]"
}
}
},
{ test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.json$/, loader: "json-loader" }
]
},
mode: "development",
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html"
})
]
};
config.js
为变量提供了指向Display.js
的图像路径,然后将其作为道具传递给Frame.js
。 Frame.js
使用提供的路径渲染图像。
//config.js
export const imgPath = "/src/images/icon.gif";
//Display.js
import {imgPath} from "./config.js";
<Frame imgSrc={imgPath} />
//Frame.js
<img src={this.props.imgSrc} />
我面临的问题是图像icon.gif
不在JavaScript捆绑包中内嵌,而是浏览器发出了获取文件的请求,这不是预期的行为。当我在生产模式下构建应用程序时,图像根本不会显示。
有人可以帮我解决这个问题吗?基本上,我面临两个问题:
谢谢!
答案 0 :(得分:0)
您必须先导入文件。但是,由于您的publicPath
设置为'/',并且图像被发射到dist
中,因此,您需要使用的图像的实际路径为/icon.gif
。
1)导入所有可能的文件(请确保在此处使用正确的路径)
// includes.js
import './src/images/icon1.gif';
import './src/images/icon2.gif';
import './src/images/icon3.gif';
2)导出生产文件路径功能
//config.js
import './includes.js';
export const imgPathFunc = num => `/icon${num}.gif`;
3)将其导入Display.js
//Display.js
import { imgPath } from "./config.js";
{serverResponse && <Frame imgSrc={imgPath(serverResponse)} />}