Javascript Webpack和Phaser 3配置

我正试图创建一个游戏使用Phaser3从一本书的教程，我决定包括学习目的的网页。我只是在游戏创建的初始阶段，但是当我运行

npm start

脚本时，我得到了很多错误，我一个接一个地修复了这些错误。我没有更多的错误，但是当运行scrip时，我得到了一个空白页，在我的dist文件夹中没有创建任何内容。这是我的webpack.config.js文件内容：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // https://webpack.js.org/concepts/entry-points/#multi-page-application
  entry: ['babel-polyfill', './src/index.js'],

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },

  // https://webpack.js.org/configuration/dev-server/
  devServer: {
    contentBase: './dist',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src/'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader',
        ],
      },
    ],
  },

  // https://webpack.js.org/concepts/plugins/
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/assets', '**', '*'),
          to: path.resolve(__dirname, 'dist'),
        },
      ],
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
    }),
    new webpack.DefinePlugin({
      'typeof CANVAS_RENDERER': JSON.stringify(true),
      'typeof WEBGL_RENDERER': JSON.stringify(true),
    }),
  ],
};

其余的文件都在我的，请随意查看。提前感谢您的帮助

更改CopyWebpackPlugin中的行

from

from:path.resolve（uu dirname，'src/assets'，'**'，'*'），

至

发件人：'src/assets'，

然后

npm运行构建

---

我通过创建一个base和prod网页包文件来解决这个问题，以提高代码的可读性，并在每个场景中导入游戏所需的每个图像。最具挑战性的部分是prod.js文件，因为我可以使用npm start而不是npm run build来渲染图像。

我这样做了，没有错误，但仍然得到一个空白页面。然而，我注意到，当运行

npm run build

时，文件是在

dist/

中生成的，然后，如果我

运行npm start

将删除

dist/

文件夹中的所有内容。npm run start-在内存中生成“虚拟构建”npm run build-在磁盘中生成真实构建我在项目中看到其他错误，如果我有时间，我会尽力提供帮助。不必担心，我刚刚设法解决了问题。