Question

我正在尝试使用react.js设置webpack来编译我的jsx应用程序。当从目录中的命令行运行webpack时，webpack似乎在终端中编译app而没有错误。问题是{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生成的html页面只包含错误的堆栈跟踪，尽管webpack不会在命令行上报告任何错误。我按照各种教程中的步骤来使节点/ 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']
                    }
                }
            }
        ]
    }

＆＃39;测试＆＃39; part是一个正则表达式匹配，它检查以.jsx结尾的文件，因此排除html文件是多余的

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

1 个答案: