[英]react production build, assets not loading
我遇到了一个烦人的问题,当我在开发环境中运行我的React应用程序时,一切正常,但是当我尝试构建到生产环境时,所有链接都是错误的。
假设这棵树:
main_directory
现在在some_component.jsx
我以这种方式引用了svg文件:
src="/public/svg/some_img.svg"
但是,在构建到生产后,此路径保持不变,因此无法再访问文件,因为在那里我需要将其更改为:
src="svg/some_img.svg"
我在玩webpack配置文件,我认为可以通过设置:
publicPath: "/"
至:
publicPath: "/public/"
可以解决问题,但是它唯一要做的就是在应用程序启动期间出错:
CANNOT GET/
我的webpack配置:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
});
module.exports = {
output: {
filename: "main.[hash:8].js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: "babel-loader?presets[]=react"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(sass|scss)$/,
use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"]
},
{
test: /\.svg$/,
loader: "svg-sprite-loader"
}
]
},
plugins: [htmlPlugin],
devServer: {
historyApiFallback: {
rewrites: [{ from: /^\/$/, to: "/index.html" }]
}
},
resolve: {
extensions: [".js", ".jsx", ".json"]
}
};
如何解决这个问题,以便开发和生产路径都统一?
如何导入svg,然后引用导入的变量:
import someImg from "../../public/svg/some_img.svg"
src={someImg}
这是解决问题的方法,需要配置以指定路径:
module: {
...
rules: [
{
test: /\.(png|jpg|gif|svg|ico)$/,
loader: 'file-loader',
query:{
outputPath: './img/',
name: '[name].[ext]?[hash]'
}
}
...
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.