WebPACKのコンパイルエラー

Question

以下は、私のアプリリアクトためwebpack.config.jsファイルです

module.exports = { 
     entry: 'index.js', 
     output: { 
     filename: 'bundle.js', 
     path: '/.' 
     }, 
     module: { 
     loaders: [ 
      { 
      test: /\.jsx?$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['react'] 
      } 
      } 
     ] 
     } 
    }; 

と私は実行時に取得していますエラーは以下の通りです：

npm ERR! code ELIFECYCLE 
npm ERR! errno 4294967295 
npm ERR! loginpoc@1.0.0 start: `webpack-dev-server --hot` 
npm ERR! Exit status 4294967295 
npm ERR! 
npm ERR! Failed at the loginpoc@1.0.0 start script 'webpack-dev-server --hot'. 
npm ERR! Make sure you have the latest version of node.js and npm installed. 
npm ERR! If you do, this is most likely a problem with the loginpoc package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR!  webpack-dev-server --hot 
npm ERR! You can get information on how to open an issue for this project with: 
npm ERR!  npm bugs loginpoc 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR!  npm owner ls loginpoc 
npm ERR! There is likely additional logging output above 

私のpackage.jsonはようです次のとおりです

{ 
    "name": "loginpoc", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.5.3", 
    "react-dom": "^15.5.3", 
    "webpack": "^2.3.3", 
    "webpack-dev-server": "^2.4.2" 
    } 
} 

私はどこが間違っているとお考えですか？

Answer 1

これを設定として使用してください。

var path = require('path'), 
module.exports = { 
     entry: 'index.js', 
     output: { 
     path: path.resolve(__dirname + '/') 
     filename: 'bundle.js', 
     publicPath: '/' 
     }, 
     devServer: { 
     contentBase: './', 
     inline: true, 
     hot: true, 
     }, 
     module: { 
     loaders: [ 
      { 
      test: /\.jsx?$/, 
      exclude: /(node_modules|bower_components)/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['react'] 
      } 
      } 
     ] 
     } 
    }; 

私がここで行ったことは、この文書に従っていくつかの欠落している構成オプションを追加することです。 configuration。パスのインポートを追加しました。 設定オプションの一部を少し変更しました。

Answer 2

設定作業を行うために必要な変更がいくつかあります。投稿したエラーはnpmのノイズだけなので、実際のエラーはそれ以上です。実際のエラーとその修正方法を示します。

ERROR in Entry module not found: Error: Can't resolve 'index.js' 

webpackのエントリポイントは、通常のインポートと同じです。これは相対パスではないため、webpackはそれをモジュールとして解決し、モジュールindex.jsをnode_modulesに探します。

entry: './index.js' 

次のエラーに遭遇するだろうと固定した後：おそらくあなたはそれになりたい

ERROR in Entry module not found: Error: Can't resolve 'babel-loader' 

あなたのWebPACKの設定でbabel-loaderを使用しているが、あなたはそれを持っていませんインストールされます。うまくインストールされているかもしれませんが、それはあなたのpackage.jsonにはないので、グローバルにインストールするか、またはそれぞれ--saveまたは--save-devをnpm installに追加するのを忘れてしまいました。いずれにせよ、それはあなたのpackage.jsonの依存関係としてリストアップされるべきで、単にnpm installを実行するだけで別のマシンでも動作します。

あなたが一度にすべてをインストールできるようにbabel-loaderに関連する依存関係は、同じエラーを生成します：

npm install --save-dev babel-loader babel-core babel-preset-react 

そして最後に、あなたが遭遇する可能性のある最後のエラーは、次のとおりです。

Error: EACCES: permission denied, open '/bundle.js' 

あなたはrootとして実行している場合、またはユーザが/（ファイルシステムのルート）に書き込むことが許可されている場合は、これを取得しません。いずれにしても、生成されたバンドルはプロジェクトのディレクトリのどこかにある必要があります。そうしないと、複数のプロジェクトが同じバンドルを上書きしてしまいます。また、output.pathを/.に設定していたので、それはタイプミスで、おそらく./を意味していました。 output.pathは絶対パスである必要があるため、許可されません。これにはpath.resolveを使用できます。

あなたは一般的に、例えば、 output.pathは、プロジェクト内のディレクトリになりたい

output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname) 
} 

distですので、通常のファイルから簡単に出力を分けることができます。ここで

は、上記のすべての変更との完全な設定です：

const path = require('path'); 

module.exports = { 
    entry: './index.js', 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react'] 
     } 
     } 
    ] 
    } 
};