原来这是我试图将自定义Webpack配置添加到create-react-app项目中的问题。
我正在尝试部署Web应用程序的前端,但是当我部署到托管平台(当前为AWS Amplify / S3)时-website上没有内容显示>
我使用create-react-app
创建了应用程序,因此项目结构遵循其标准(public
,src
文件夹等。
当我在本地运行应用程序时,它可以正常工作。
由于控制台错误,并查看webpack生成的index.html
页面,似乎它没有替换%PUBLIC_URL%
字段,而该字段应替换为构建中的公共目录。
请有人可以解释如何解决此问题?
我已在下面包含我的webpack.config
文件,可以在here中找到完整的存储库>
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
entry: ['react-hot-loader/patch', './src/index.js'],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.svg$/,
use: 'file-loader',
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png',
},
},
],
},
{
test: /\.(ttf|eot|woff|woff2)$/,
use: 'file-loader',
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'react-dom': '@hot-loader/react-dom',
},
},
devServer: {
contentBase: './build',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./public/index.html'),
}),
],
}
module.exports = config
我正在尝试部署Web应用程序的前端,但是当我部署到托管平台(当前为AWS Amplify / S3)时,在网站上没有任何内容显示,我使用...创建的应用程序...]
原来这是我试图将自定义Webpack配置添加到create-react-app项目中的问题。
我现在已经删除了Webpack配置,而是使用了在使用create-react-app构建过程时创建的dist文件。
原来这是我试图将自定义Webpack配置添加到create-react-app项目中的问题。