[英]Webpack and Phaser 3 configuration
我正在尝试使用书籍教程中的 Phaser 3 创建游戏,我决定将 webpack 包括在内以用于学习目的。 我只是处于游戏创建的初始阶段,但是当我运行npm start
脚本时,我遇到了很多错误,我一一修复了。 我没有更多错误,但是在运行脚本时,我得到了一个空白页面,并且在我的 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),
}),
],
};
文件的rest位于我的仓库中,请随时查看。 提前感谢您的任何帮助。
来自from: path.resolve(__dirname, 'src/assets', '**', '*'),
from: 'src/assets',
npm run build
我通过创建基础和 prod webpack 文件来解决这个问题,以获得更好的代码可读性,并在每个场景中导入游戏所需的每个图像。 最具挑战性的部分是 prod.js 文件,因为我能够使用 npm 启动而不是 npm 运行构建来渲染图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.