Question

我在Windows中开发了我的应用程序，并在AWS Ubuntu中托管。该应用程序是使用Node和React与Webpack开发的。

Webpack配置：

＆＃13;

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
var combineLoaders = require('webpack-combine-loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: path.join(__dirname, "public"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/app/client.js",
  module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015', 'stage-0'],
              plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
            }
        },
        {
          test: /\.css$/,
          loader: combineLoaders([
            {
              loader: 'style-loader'
            }, {
              loader: 'css-loader',
              query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            }
          ])
        },
        {
            test: /\.scss$/,
            loaders: ["style-loader", "css-loader", "sass-loader"]
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loaders: [
                'file?hash=sha512&digest=hex&name=[hash].[ext]',
                'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
            ]
        }
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, "/public/src/styles/")]
  },
  output: {
    path: __dirname + "/public/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

＆＃13;

应用程序在我的本地工作正常，但不在服务器中。我在控制台中收到错误：

Header.js:5 Uncaught Error: Cannot find module "../../../images/icons/user.png" at webpackMissingModule (Header.js:5)

cmd中的错误：

ERROR in ./public/src/images/icons/user.png
Module build failed: Error: spawn     /home/ubuntu/dashboard/node_modules/pngquant-bin/vendor/pngquant ENOENT
at exports._errnoException (util.js:1022:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:359:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
@ ./public/src/app/components/Dashboard/Media/Media.js 76:14-60

在我的node_modules\pngquant-bin\vendor文件夹中有一个pngquant.exe文件，是创建任何问题还是在webpack中指定的目录路径？

更新

console.log(process.env.NODE_ENV);在我的本地和服务器中提供undefined。

Answer 1

您在Windows操作系统中开发了应用程序并希望在Ubuntu OS上部署。将文件从Windows导入Linux时，我也遇到了同样的问题。

您在Windows Server实例上部署应用程序，因为您将在Windows操作系统中使用浏览器。导入文件时，它将获得与Windows Server Instance文件系统相同的文件路径。因此实际文件可以存储在实例中。文件路径在这里很重要。
如果您想在AWS Ubuntu OS上部署应用程序，而不是通过Windows操作系统浏览文件，您可以在Ubuntu中存储文件。其背后的原因是，当您浏览Windows操作系统时，文件路径会发生变化。

我解决了在Windows实例中部署应用程序的问题。

在服务器AWS中加载图像时出错

1 个答案: