Reactjs 在heroku上部署react应用程序时出现网页问题
我在heroku上部署react应用程序时遇到了一些麻烦 我为Webpack2制作了一个配置生产文件Reactjs 在heroku上部署react应用程序时出现网页问题,reactjs,heroku,deployment,webpack,Reactjs,Heroku,Deployment,Webpack,我在heroku上部署react应用程序时遇到了一些麻烦 我为Webpack2制作了一个配置生产文件 const webpack = require('webpack'); const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const Cle
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const extractTextPlugin = new ExtractTextPlugin({
filename: 'main.[hash].css'
});
const HtmlPlugin = new HtmlWebpackPlugin({
template: 'src/index.html',
inject: 'body',
favicon: 'src/data/resources/img/logo/favicon.ico'
});
const ENVS = {
'process.env': {
'NODE_ENV': JSON.stringify('production')
},
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
};
const PATHS = {
app : path.join( __dirname, 'src'),
build : path.join( __dirname, 'dist')
};
const config = {
entry: [
PATHS.app + "/index.js"
],
output: {
path: PATHS.build,
filename: 'bundle.[hash].js',
publicPath: '/',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
exclude: [nodeModulesPath],
use: ['babel-loader']
},
{
test: /\.(scss|css)$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.html$/,
use: [ {
loader: 'html-loader',
options: {
minimize: true,
removeComments: true,
}
}],
},
{
test: /\.(jpeg|jpg|gf|png|ico|svg|woff|woff2|eot|ttf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/',
publicPath: '/'
},
}
]
}
]
},
plugins: [
extractTextPlugin,
HtmlPlugin,
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
minimize: true,
compress: {
warnings: false,
},
}),
new webpack.DefinePlugin(ENVS),
new webpack.NoEmitOnErrorsPlugin(),
new CleanWebpackPlugin(['dist']),
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery'
})
],
};
module.exports = config;
当我在我的计算机上运行npm run build
时,我没有任何错误,我有我的文件夹dist
但是在heroku上推了一下之后,我有以下日志:
构建/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4
webpack-p——配置webpack-production.config.js干净的webpack插件:/tmp/build_646d8d781ce9c27434ec9ce9e11f2b4/dist
已被删除。哈希:2a8fc0ac2f35a1a04faf版本:webpack 2.5.1
时间:26063ms[163]./~/jquery/dist/jquery.js 268kb{0}[builded]
[190]./src/index.js 752字节{0}[build][191]
./~/babel polyfill/lib/index.js 833字节{0}[build][192]
./~/babel polyfill/~/core js/fn/regexp/escape.js 107字节{0}[编译]
[372]./~/babel polyfill/~/core js/shim.js 7.38 kB{0}[builded][373]
./~/bootstrap/dist/js/bootstrap.js 69.7kb{0}[build][374]
./~/bootstrap/dist/css/bootstrap-theme.css 41字节{0}[build][375]
./~/bootstrap/dist/css/bootstrap.css 41字节{0}[build][376]
./~/fixed-data-table/dist/fixed-data-table.css 41字节{0}[编译]
[392]./~/react dom/index.js 59字节{0}[build][469]
./~/react/react.js 56字节{0}[build][470]
./~/registrator runtime/runtime.js 24.4 kB{0}[build][471]多线程
./src/index.js 28字节{0}[build][472]
./~/css加载器/~/sass-loader/lib/loader.js/~/bootstrap/dist/css/bootstrap-theme.css
23.1 kB[已构建][481]。/~/style-loader/addStyles.js 8.51 kB[已构建]
+468未找到./src/index.js模块中的隐藏模块错误:错误:无法解析中的“./app/app”
“/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/src@./src/index.js”
11:11-31@multi./src/index.js子html网页包插件
“index.html”:
[0]./~/html网页包插件/lib/loader.js/src/index.html 658字节{0}[builded]子提取文本网页包插件:
[0]./~/css-loader/lib/css-base.js 2.26 kB{0}[编译]
[1] ./~/css加载器/~/sass-loader/lib/loader.js/~/固定数据表/dist/fixed-data-table.css
6.27 kB{0}[Build]子抽取文本网页包插件:
[0]./~/css-loader/lib/css-base.js 2.26 kB{0}[编译]
[1] ./~/css加载器/~/sass-loader/lib/loader.js/~/bootstrap/dist/css/bootstrap-theme.css
23.1 kB{0}[Build]子抽取文本网页包插件:
[0]./~/bootstrap/dist/font/glyphicons-halflings-regular.eot 57字节{0}[builded]
[1] ./~/css-loader/lib/css-base.js 2.26 kB{0}[编译]
[2] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svg 57字节{0}[编译]
[3] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 57字节{0}[编译]
[4] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 58字节{0}[编译]
[5] ./~/bootstrap/dist/font/glyphicons-halflings-regular.woff2 59字节{0}[编译]
[6] ./~/css加载器/~/sass-loader/lib/loader.js/~/bootstrap/dist/css/bootstrap.css
121 kB{0}[Build]npm错误!Linux 3.13.0-112-通用npm错误!argv
“/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/.heroku/node/bin/node”
“/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/.heroku/node/bin/npm”
“运行”“生成”npm错误!节点v6.10.3 npm错误!npm v3.10.10 npm错误!
代码ELIFECYCLE npm ERR!Olamee@0.1.0构建:webpack-p--config
webpack production.config.js
npm ERR!退出状态2
这是package.json的脚本
"scripts": {
"start": "webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --history-api-fallback",
"build": "webpack -p --config webpack-production.config.js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
它告诉我,我在index.js中加载应用程序组件时遇到了问题!
但我说,在我的电脑里,当然在开发模式下,一切都没问题
我的文件夹结构如下:
src
-app(所有组件、减速器、动作等)-数据(所有样式表、图像、json文件等)
-index.html
-index.js
谢谢你的帮助 尝试在本地计算机上运行bundle exec rake assets:precompile RAILS\u ENV=production--trace。