尝试设置 webpack 以编译我的 jsx 应用程序时出错

Question

我正在尝试使用 react.js 设置 webpack 来编译我的 jsx 应用程序。从目录中的命令行运行 webpack 时，webpack 似乎在终端编译应用程序时没有错误。问题是在 {my-project-path}/public/index.html 中生成了一个文件，其内容如下所示（我的文件系统上的实际路径在此 sn-p 中替换为 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 生成的 html 页面只是包含错误的堆栈跟踪，尽管 webpack 不会在命令行上报告任何错误。我按照各种教程中的步骤来让 node/webpack/react 应用程序正常工作，但是其中的 devOps 部分真的很难。请注意，使用 babel-loader 而不是文件加载器等调整会产生相同的结果。可能是因为我的设置正在寻找在“{my-project-path}/index.html”处产生的东西，而实际上 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']
                    }
                }
            }
        ]
    }

'test' 部分是一个正则表达式匹配，它检查以 .jsx 结尾的文件，因此排除 html 文件是多余的