javascript - Webpack 和 Phaser 3 配置
问题描述
我正在尝试使用书籍教程中的 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),
}),
],
};
其余文件位于我的repo中,请随时查看。提前感谢您的任何帮助。
解决方案
- CopyWebpackPlugin 中的更改行
从from: path.resolve(__dirname, 'src/assets', '**', '*'),
至from: 'src/assets',
- 然后
npm run build
推荐阅读
- sql - Sql查询捕获最小日期,基于行排序的最大日期为空
- ionic-framework - 当我在 Windows 上运行 ionic 应用程序时,它显示错误:找不到模块“@angular/compiler”
- database - 在 mogodb 中使用 insertMany() 但即使语法正确,我也无法插入它
- html - 列/文本 - 转到下一行
- php - 热门获取属于其他用户关注的用户的帖子
- javascript - 小型 Postgres 表与 Javascript 对象
- swift - 为什么在 deinit 之后 dispatchqueue.global() 仍然存在
- reactjs - TS2322 - 假 | 元素不可分配给类型 ReactElement。错误不会始终出现在应用程序中?
- python - 如何在 Python 中比 O(n^2) 时间更快地解决 2_sum?
- dialogflow-es - 使用 webhook 挂断 Dialogflow 电话呼叫