ReactJS with Webpack：キャッチされていないReferenceError：requireが定義されていません

Question

以下は私のwebpack.config.jsです。ブラウザの開発ツールで、「Uncaught ReferenceError：require is not defined」を取得します。

「target」を削除すると、「ノード」というエラーが発生し、「Uncaught TypeError：fs.​​readFileSyncが関数ではありません」というエラーがスローされます。

var config = { 
    entry: './main.js', 

    output: { 
     filename: './index.js', 
    }, 

    devServer: { 
     inline: true, 
     port: 8080 
    }, 
    node: { 
    fs: "empty" 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 

      query: { 
       presets: ['es2015', 'react'] 
      } 
     } 
     ] 
    }, 
    target: 'node' 
} 
module.exports = config; 

Answer 1

ノードからのネイティブモジュールが必要で、ブラウザ内で使用しようとしています。この場合、fsが必要です。

あなたがブラウザのコードを作っているなら、あなたはノードfs.readFileSyncを使用することができない、あなたはtarget: 'node'

を使用するはずの私は、次のmain.jsファイルを使用して問題を再現することができます。

const fs = require('fs'); 

const test = function() { 
    console.log('this is a test'); 
    var contents = fs.readFileSync('DATA', 'utf8'); 
} 

test(); 

あなたは、あなたがいずれかのブラウザ内で追加のファイルを使用しようとしている場合：

ビルド

上のファイルを必要とする。これは、永久にあなたのインデックスを持つファイルのデータを出荷します.jsファイルには、たとえばrequireを使用します。内容が何らかの設定で、ユーザーごとに変更されていない場合、これは完全に許容されます。例として、言語ファイルなどがあります。この方法では、ファイルの内容が大きい場合、資産ファイルが増加し、

const data = require('some-data.json`) 
console.log(data) // would output the JSON 

AJAXコンテンツのAjaxを使用して

/あなたがページの読み込み時にファイルの内容を呼び出すことができます取得します。このファイルが各訪問者に固有のものである場合は、これを行う必要があります。