我在heroku上部署我的反应应用程序时遇到了一些麻烦 .
我为webpack 2制作了一个配置 生产环境 文件 .
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上，我有这个日志：
build / tmp / build_646d8d781ce9c274343ec9ce9e11f2b4 webpack -p --config webpack-production.config.js clean-webpack-plugin：/ tmp / build_646d8d781ce9c274343ec9ce9e11f2b4 / dist已被删除 . 哈希：2a8fc0ac2f35a1a04faf版本：webpack 2.5.1时间：26063ms [163] ./~/jquery/dist/jquery.js 268 kB {0} [built] [190] ./src/index.js 752 bytes {0} [ Build ] [191] ./~/babel-polyfill/lib/index.js 833字节{0} [建造] [192] ./~/babel-polyfill/~/core-js/fn/regexp/escape.js 107字节{0} [built] [372] ./~/babel-polyfill/~/core-js/shim.js 7.38 kB {0} [built] [373] ./~/bootstrap/dist/js/bootstrap .js 69.7 kB {0} [built] [374] ./~/bootstrap/dist/css/bootstrap-theme.css 41 bytes {0} [built] [375] ./~/bootstrap/dist/css/bootstrap .css 41个字节{0} [built] [376] ./~/fixed-data-table/dist/fixed-data-table.css 41个字节{0} [built] [392] ./~/react-dom /index.js 59字节{0} [built] [469] ./~/react/react.js 56字节{0} [built] [470] ./~/regenerator-runtime/runtime.js 24.4 kB {0 } [built] [471] multi ./src/index.js 28 bytes {0} [built] [472] ./~/css-loader!./~/sass-loader/lib/loader.js！ . / 〜/ bootstrap / dist / css / bootstrap-theme.css 23.1 kB [built] [481] ./~/style-loader/addStyles.js 8.51 kB [built] 468 ./src/index.js中的隐藏模块错误找不到模块：错误：无法解析'/ tmp / build_646d8d781ce9c274343ec9ce9e11f2b4 / src'中的'./app/App'@ . / src / index.js 11：11-31 @ multi ./src/index.js“index.html”的子html-webpack-plugin：[0] ./~/html-webpack-plugin/lib/loader.js！ . / src / index.html 658字节{0} [built] Child extract-text-webpack-plugin：[0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built] [1] ./~/css- loader！./~ / sass-loader / lib / loader.js！./~ / fixed-data-table / dist / fixed-data-table.css 6.27 kB {0} [built] Child extract-text-webpack-插件：[0] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built] [1] ./~/css-loader!./~/sass-loader/lib/loader .js！./~ / bootstrap / dist / css / bootstrap-theme.css 23.1 kB {0} [built] Child extract-text-webpack-plugin：[0] ./~/bootstrap/dist/fonts/glyphicons- halflings-regular.eot 57 bytes {0} [built] [1] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built] [2] ./~/bootstrap/dist/ fonts / glyphicons-halflings-regular.svg 57 bytes {0} [built] [3] ./~/bootstrap/d ist / fonts / glyphicons-halflings-regular.ttf 57 bytes {0} [built] [4] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 58 bytes {0} [built] [5] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 59 bytes {0} [built] [6] ./~/css-loader!./~/sass-loader/lib/loader.js！ ./~/bootstrap/dist/css/bootstrap.css 121 kB {0} [built] npm ERR！ Linux 3.13.0-112-generic npm ERR！ argv“/tmp/build_646d8d781ce9c274343ec9ce9e11f2b4/.heroku/node/bin/node”“/ tmp / build_646d8d781ce9c274343ec9ce9e11f2b4 / .heroku / node / bin / npm”“run”“build”npm ERR！节点v6.10.3 npm ERR！ npm v3.10.10 npm ERR！代码ELIFECYCLE npm ERR！ Olamee@0.1.0 build：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中遇到了加载app组件的问题！但我说，在我的计算机上，当然在开发模式下，它没关系 .
我的文件夹结构如下：
SRC
-app（所有组件，减速器，动作等）
-data（所有样式表，图像，json文件等）
-index.html
-index.js
谢谢你的帮助！