Question

我在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字节{0} [建造] [191]     ./~/babel-polyfill/lib/index.js 833字节{0} [建造] [192]     ./~/babel-polyfill/~/core-js/fn/regexp/escape.js 107字节{0} [已建]     [372] ./~/babel-polyfill/~/core-js/shim.js 7.38 kB {0} [建造] [373]     ./~/bootstrap/dist/js/bootstrap.js 69.7 kB {0} [建造] [374]     ./~/bootstrap/dist/css/bootstrap-theme.css 41个字节{0} [建造] [375]     ./~/bootstrap/dist/css/bootstrap.css 41个字节{0} [建造] [376]     ./~/fixed-data-table/dist/fixed-data-table.css 41个字节{0} [已建]     [392] ./~/react-dom/index.js 59字节{0} [建造] [469]     ./~/react/react.js 56字节{0} [建造] [470]     ./~/regenerator-runtime/runtime.js 24.4 kB {0} [built] [471] multi     ./src/index.js 28字节{0} [建造] [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中的错误找不到模块：错误：无法解析'./app/App'in     '/ tmp / build_646d8d781ce9c274343ec9ce9e11f2b4 / src'@ ./src/index.js     11：11-31 @ multi ./src/index.js Child html-webpack-plugin for     “的index.html”：            [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-plugin：            [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字节{0} [已建]            [3] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf 57字节{0} [已建]            [4] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 58字节{0} [建]            [5] ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2 59字节{0} [已建]            [6] ./~/css-loader!./~/sass-loader/lib/loader.js！。/〜/ bootstrap / did / 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”     “运行”“构建”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

谢谢你的帮助！

使用webpack问题在heroku上部署react应用程序

0 个答案: