尝试在我的 React 应用程序中使用 webpack。获得 "error Command failed with exit code 2."

Question

我一直在尝试按照几个教程来安装 webpack，这样我就可以将更多自定义包加载到我的 React 应用程序中。

这是我的包json文件

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "dependencies": {
    "babel": "^6.23.0",
    "css-loader": "^0.28.5",
    "file-loader": "^0.11.2",
    "gh-pages": "^1.0.0",
    "html-webpack-plugin": "^2.30.1",
    "path": "^0.12.7",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.11",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "web-dev-server": "^1.1.1",
    "webpack": "^3.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "npm run build&&gh-pages -d build"
  },
  "homepage": "https://jdiperi88.github.io",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

这是我的 webpack.config 文件

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      { 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      { 
        test: /\.png$/, 
        loader: "url-loader?limit=100000" 
      },
      { 
        test: /\.jpg$/, 
        loader: "file-loader" 
      }

    ]
  },
};

这是我的 .babelrc

/* 
    ./.babelrc
*/  
{
    "presets":[
        "es2015", "react"
    ]
}

这是我的文件结构和错误消息的屏幕截图。

顶部截图的扩展

基本上我一直在尝试建立一个投资组合，css 在每个浏览器中的呈现方式都大不相同。当我将它部署在 github 页面上和当我将它部署在本地主机上时，它甚至在同一浏览器中呈现不同。因此，任何 css 解决此问题的解决方案也将不胜感激。

Answer 1

消息 "error Command failed with exit code 2" 只是告诉您当命令 (webpack) 为运行时出错了。

在该消息上方的输出中，有 4 'real' 条错误消息。

前三个错误消息表明您的 App.js 文件正在尝试导入不存在的文件。

最后一个错误表明 Webpack 不知道如何处理 .tff 文件。正如该消息所暗示的那样，您将需要另一个加载程序来处理 .tff 文件。您需要将 { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' } 添加到加载程序配置中。有关详细信息，请参阅 this issue。

尝试在我的 React 应用程序中使用 webpack。获得 "error Command failed with exit code 2."

Trying to use webpack in my react app. Getting a "error Command failed with exit code 2."

javascript

reactjs

webpack

webpack-dev-server

css-loader