Question

我正在一起使用React，WebPack和Babel的Tutorial之一。

尽管一切都按预期进行（正确构建，编译和呈现）。

我从webpack中得到一个错误，

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 666 bytes {0} [built]

我的WebPack配置文件如下：

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

我的文件结构如下：

WebPack_Demo
  -dist
  -node_modules
  -src
    -javascript
      -components
        -Component1.js
        -Component2.js
    -index.html
    -index.js
  -.babelrc
  - package-lock.json
  - webpack.config.js

在本教程之后，其他人也遇到了错误，但是作者没有解决。即使它不影响应用程序，我仍然想知道如何消除此错误。

Answer 1

我认为您应该将“ entry”和“ output”属性添加到您的webpack配置文件中。

您的输出应具有指向存储捆绑文件的文件夹的“路径”。

然后HtmlWebpackPlugin中的“文件名”应指向该文件夹

这是我的设置方式：

const path = require('path');

module.exports = {
  entry: {
    app: path.resolve(__dirname, '.','index.js')
  },
  output: {
    path: path.resolve(__dirname, '.', 'build'),   // ATTENTION
    publicPath: '/',
    filename: '[name].js'
  },
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin({
       template: path.resolve('.', 'src', 'index.html'),
       chunks: [chunks],
       filename: path.join('.', 'build', 'index.html'),  // ATTENTION
    }),
    ....
  ],
  ....
}

WebPack：入口点未定义

1 个答案: