作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 webpack React 应用程序部署到我的 gh-pages。
这是我用来构建和部署的脚本。
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject",
"watch": "webpack-dev-server --progress",
"deploy": "gh-pages -d dist"
},
运行后:
npm run build
npm run deploy
我的/dist/文件夹已部署到 gh-pages 分支。 https://github.com/Damhan/Serify/tree/gh-pages
导航至 https://damhan.github.io/Serify/ 时该页为空白。
控制台显示以下错误:
Failed to load resource: the server responded with a status of 404 (Not Found) bundle.js:1
这是我的 webpack 配置:
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "./src/index.js"),
output: {
filename:"bundle.js",
path: path.resolve(__dirname, '/dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
{
test: /\.css$/,
loaders: ["style-loader", "css-loader"]
}
]
},
devServer: {
contentBase: path.join(__dirname, "/dist"),
historyApiFallback:true
}
};
最佳答案
我相信当您运行构建和部署时,它认为您的主页位于 /
。但事实上,你的主页是https://damhan.github.io/Serify/
。
在 package.json 中添加以下内容:
{
"name": "serify",
"version": "0.1.0",
"private": true,
"homepage": "https://damhan.github.io/Serify/",
...
}
我还看了你的index.html
在公共(public)文件夹中,您手动添加了 <script src=".bundle.js"></script>
。在这种情况下,我会添加 <script src="/Serify/bundle.js"></script>
相反。
关于javascript - 如何让gh-pages找到bundle.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59940102/
我是一名优秀的程序员,十分优秀!