Javascript 反应生产构建,未加载资产
我遇到了一个恼人的问题,当我在开发环境中运行我的react应用程序时,一切正常,但当我尝试构建到生产环境时,所有的链接都是错误的 假设这棵树:Javascript 反应生产构建,未加载资产,javascript,node.js,reactjs,webpack,Javascript,Node.js,Reactjs,Webpack,我遇到了一个恼人的问题,当我在开发环境中运行我的react应用程序时,一切正常,但当我尝试构建到生产环境时,所有的链接都是错误的 假设这棵树: 主目录 公开的/ svg/ 一些_img.svg src/ 组成部分/ 一些_component.jsx App.js index.js 现在在some_component.jsx中,我以这种方式引用svg文件: src="/public/svg/some_img.svg" 但是,在构建到生产环境后,此路径未被触及,因此无法再访
- 主目录
- 公开的/
- svg/
- 一些_img.svg
- svg/
- src/
- 组成部分/
- 一些_component.jsx
- App.js
- index.js
- 组成部分/
- 公开的/
some_component.jsx
中,我以这种方式引用svg文件:
src="/public/svg/some_img.svg"
但是,在构建到生产环境后,此路径未被触及,因此无法再访问文件,因为我需要将其更改为:
src="svg/some_img.svg"
我在webpack配置文件中玩,我想可能通过设置:
publicPath: "/"
致:
将解决问题,但它所做的唯一一件事是在应用程序启动期间出错:
CANNOT GET/
我的网页包配置:
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}
如何导入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]'
}
}
...
]
}
这是问题的解决方案,需要配置来指定路径:
module: {
...
rules: [
{
test: /\.(png|jpg|gif|svg|ico)$/,
loader: 'file-loader',
query:{
outputPath: './img/',
name: '[name].[ext]?[hash]'
}
}
...
]
}
这没有任何帮助,我有额外的svg处理模块,不会那样工作,我需要的是为它配置webpack的方法。据我所知,这种方法是普遍接受的用webpack加载图像的方法。这(如果有的话)只会解决在jsx组件中导入svg文件的问题,我该如何处理css中图像的路径?在开发路径看起来与css中的productionPath不同的情况下,您将处理相同的问题。css所在位置的相对路径。sass/css加载器为您修复该问题,并将路径转换为正确的路径。在你的jsx上,你不应该这样导入。在jsx上使用
import mysvg from'../../path/to/where/it/is'
,在css上使用url('../../mysvg')
。这没有任何帮助,我有额外的svg处理模块,不会这样工作,我需要的是为它配置网页包的方法。据我所知,这种方法是使用webpack加载图像的普遍接受的方法。这(如果有的话)只能解决jsx组件中svg文件的导入问题,以及我如何处理css中图像的路径问题?在开发路径看起来与css中的productionPath不同的情况下,您将处理相同的问题。css所在位置的相对路径。sass/css加载器为您修复该问题,并将路径转换为正确的路径。在jsx上,不应该这样导入。在jsx上使用import mysvg from'../../path/to/where/it/is'
,在css上使用url('../../mysvg')
。