webpackをセットアップしてjsxアプリケーションをコンパイルしようとしたときにエラーが発生しました

Question

jsxアプリケーションをコンパイルするためにreact.jsでwebpackをセットアップしようとしています。ディレクトリ内のコマンドラインからwebpackを実行すると、webpackは端末でエラーなしにアプリケーションをコンパイルするようです。問題は{my-project-path} /public/index.html内のファイルが以下の内容で生成されていることです（ファイルシステム上の実際のパスはこのスニペットでmy-project-pathに置き換えられます）：

Html Webpack Plugin: 
    <pre> 

    Error: Child compilation failed: 
     Entry module not found: Error: Can't resolve '<my-project-path>/index.html' in '<my-project-path>': 
     Error: Can't resolve '<my-project-path>/index.html' in '<my-project-path>' 

     - compiler.js:76 
     [stripe_complex_example]/[html-webpack-plugin]/lib/compiler.js:76:16 

     - Compiler.js:298 Compiler.<anonymous> 
     [stripe_complex_example]/[webpack]/lib/Compiler.js:298:10 

     - Compiler.js:516 
     [stripe_complex_example]/[webpack]/lib/Compiler.js:516:13 

     - Tapable.js:138 next 
     [stripe_complex_example]/[tapable]/lib/Tapable.js:138:11 

     - CachePlugin.js:62 Compiler.<anonymous> 
     [stripe_complex_example]/[webpack]/lib/CachePlugin.js:62:5 

     - Tapable.js:142 Compiler.applyPluginsAsyncSeries 
     [stripe_complex_example]/[tapable]/lib/Tapable.js:142:13 

     - Compiler.js:513 
     [stripe_complex_example]/[webpack]/lib/Compiler.js:513:10 

     - Tapable.js:131 Compilation.applyPluginsAsyncSeries 
     [stripe_complex_example]/[tapable]/lib/Tapable.js:131:46 

     - Compilation.js:655 self.applyPluginsAsync.err 
     [stripe_complex_example]/[webpack]/lib/Compilation.js:655:19 

     - Tapable.js:131 Compilation.applyPluginsAsyncSeries 
     [stripe_complex_example]/[tapable]/lib/Tapable.js:131:46 

     - Compilation.js:646 self.applyPluginsAsync.err 
     [stripe_complex_example]/[webpack]/lib/Compilation.js:646:11 

     - Tapable.js:131 Compilation.applyPluginsAsyncSeries 
     [stripe_complex_example]/[tapable]/lib/Tapable.js:131:46 

     - Compilation.js:641 self.applyPluginsAsync.err 
     [stripe_complex_example]/[webpack]/lib/Compilation.js:641:10 

     - Tapable.js:131 Compilation.applyPluginsAsyncSeries 
     [stripe_complex_example]/[tapable]/lib/Tapable.js:131:46 

     - Compilation.js:637 sealPart2 
     [stripe_complex_example]/[webpack]/lib/Compilation.js:637:9 

     - Tapable.js:131 Compilation.applyPluginsAsyncSeries 
     [stripe_complex_example]/[tapable]/lib/Tapable.js:131:46 

     - Compilation.js:580 Compilation.seal 
     [stripe_complex_example]/[webpack]/lib/Compilation.js:580:8 

     - Compiler.js:510 
     [stripe_complex_example]/[webpack]/lib/Compiler.js:510:16 

     - Tapable.js:225 
     [stripe_complex_example]/[tapable]/lib/Tapable.js:225:11 

     - Compilation.js:482 _addModuleChain 
     [stripe_complex_example]/[webpack]/lib/Compilation.js:482:11 

     - Compilation.js:371 Compilation.errorAndCallback 
     [stripe_complex_example]/[webpack]/lib/Compilation.js:371:4 

     - Compilation.js:392 moduleFactory.create 
     [stripe_complex_example]/[webpack]/lib/Compilation.js:392:12 

     - NormalModuleFactory.js:247 factory 
     [stripe_complex_example]/[webpack]/lib/NormalModuleFactory.js:247:20 

     - NormalModuleFactory.js:65 resolver 
     [stripe_complex_example]/[webpack]/lib/NormalModuleFactory.js:65:21 

     - NormalModuleFactory.js:138 asyncLib.parallel 
     [stripe_complex_example]/[webpack]/lib/NormalModuleFactory.js:138:21 

     - async.js:3861 
     [stripe_complex_example]/[async]/dist/async.js:3861:9 

     - async.js:421 
     [stripe_complex_example]/[async]/dist/async.js:421:16 

     - async.js:996 iteratorCallback 
     [stripe_complex_example]/[async]/dist/async.js:996:13 

     - async.js:906 
     [stripe_complex_example]/[async]/dist/async.js:906:16 

     - async.js:3858 
     [stripe_complex_example]/[async]/dist/async.js:3858:13 

マイwebpack.config.jsファイルは次のとおりです。

module.exports = { 
    entry: __dirname + '/client/client.js', 
    output: { 
     filename: 'bundle.js', 
     path: __dirname + '/public' 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx$/, 
       exclude: [/node_modules/, require.resolve('./public/index.html')], 
       use: { 
        loader: 'file-loader', 
        query: { 
         presets: ['react', 'es2015'] 
        } 
       } 
      } 
     ] 
    } 
} 

マイ.babelrcファイルが

{ 
    "presets": ["es2015", "react"] 
} 

マイプロジェクト構造は次のとおりです。

/client 
    /components 
     .... 
    client.js 
/node_modules 
/public 
    bundle.js 
    index.html 
.babelrc 
.env 
.gitignore 
package.json 
server.js 
webpack.config.js 

マイpackage.jsonファイルは問題を要約すると

{ 
    "main": "server.js", 
    "dependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-register": "^6.24.1", 
    "body-parser": "^1.17.2", 
    "dotenv": "^4.0.0", 
    "express": "^4.15.3", 
    "file-loader": "^0.11.2", 
    "html-webpack-plugin": "^2.29.0", 
    "jquery": "^3.2.1", 
    "pug": "", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "stripe": "^4.23.1", 
    "webpack": "^1.13.2" 
    } 
} 

あるのWebPACKは、コマンドライン上のすべてのエラーを報告しませんが、WebPACKのによって生成されたHTMLページは、単にエラーのスタックトレースが含まれています。私は、さまざまなチュートリアルの手順に従ってノード/ webpack/reactアプリケーションを動作させましたが、devOpsの部分は本当に難しいです。ファイルローダーの代わりにbabel-loaderを使用するなどの調整が同じ結果をもたらすことに注意してください。実際にindex.htmlがパブリックフォルダ内で生成されている場合、私の設定が '{my-project-path} /index.html'で生成されたものを探していることが原因ですか？もしそうなら、私はこれをどのように修正するのですか？

Answer 1

この部分require.resolve('./public/index.html')は、以下の対象から除外すべきである。

module: { 
     loaders: [ 
      { 
       test: /\.jsx$/, 
       exclude: [/node_modules/, require.resolve('./public/index.html')], 
       use: { 
        loader: 'file-loader', 
        query: { 
         presets: ['react', 'es2015'] 
        } 
       } 
      } 
     ] 
    } 

「試験」部分は.jsxので終わるファイルをチェックする正規表現マッチ、である、したがって、htmlファイルを除くことは冗長である