我有Webpack / Phaser / Express项目。加载应用程序时,无法在Chrome控制台中加载图像并出现以下错误:
GET http://localhost:8080/assets/ui/blue_button03.png 500 (Internal Server Error)
GET http://localhost:8080/assets/ui/blue_button02.png 500 (Internal Server Error)
将这些图像加载到移相器中
this.load.image('blueButton1', 'assets/ui/blue_button02.png');
this.load.image('blueButton2', 'assets/ui/blue_button03.png');
我尝试在移相器代码中包含的每个静态文件中都有相同的错误。
Webpack配置:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Phaser webpack config
const phaserModule = path.join(__dirname, '/node_modules/phaser/')
const phaser = path.join(phaserModule, 'src/phaser.js')
const definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
WEBGL_RENDERER: true, // I did this to make webpack work, but I'm not really sure it should always be true
CANVAS_RENDERER: true // I did this to make webpack work, but I'm not really sure it should always be true
})
module.exports = {
entry: {
app: './src/js/main.js',
vendor: ['phaser']
},
devtool: '#source-map',
mode: 'development',
target: 'web',
output: {
pathinfo: true,
path: path.resolve(__dirname, 'dev'),
publicPath: '/',
library: '[name]',
libraryTarget: 'umd',
filename: '[name].js'
},
plugins: [
definePlugin,
new HtmlWebpackPlugin({
filename: './index.html',
template: './src/html/index.html',
chunks: ['vendor', 'app'],
chunksSortMode: 'manual',
minify: {
removeAttributeQuotes: false,
collapseWhitespace: false,
html5: false,
minifyCSS: false,
minifyJS: false,
minifyURLs: false,
removeComments: false,
removeEmptyAttributes: false
},
hash: false
}),
new webpack.NoEmitOnErrorsPlugin()
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
// Loads the javacript into html template provided.
// Entry point is set below in HtmlWebPackPlugin in Plugins
test: /\.html$/,
use: [
{
loader: "html-loader",
//options: { minimize: true }
}
]
},
{
test: /\.(png|svg|jpg|gif|wav)$/,
use: ['file-loader']
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{ test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] },
{ test: [/\.vert$/, /\.frag$/], use: 'raw-loader' }
]
}
}
这就是我在server.js中使用webpack-dev-middleware的方式:
const app = express(),
DIST_DIR = __dirname,
HTML_FILE = path.join(DIST_DIR, 'index.html'),
compiler = webpack(config);
var server = http.Server(app);
// binds the serv object we created to socket.io
var io = socketio(server);
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
app.get('*', (req, res, next) => {
compiler.outputFileSystem.readFile(HTML_FILE, (err, result) => {
if (err) {
return next(err);
}
res.set('content-type', 'text/html');
res.send(result);
res.end();
});
});
const PORT = process.env.PORT || 8080;
项目结构:
+-- dev
| |
| +-- assets
| +-- index.html
| +-- app.js
| +-- server.js
| +-- vendor.js
|
+-- src
| |
| +-- assets
| +-- html
| |
| | +-- index.html
| |
| +-- server
| |
| | +-- server.js
| |
| +-- js
| |
| | +-- main.js
| |
|
+-- package.json
|
+-- webpack.config.js
任何建议如何使其正常工作?如果我不使用webpack-dev-middleware应用程序,则原因会很好。但是每次进行一些更改时都无法重建项目太烦人了。
答案 0 :(得分:0)
如果您首先导入资产,Webpack将解析捆绑中的路径。然后您可以像这样在Phaser中加载它:
import blueButton1 from '../assets/ui/blue_button02.png'
this.load.image('blueButton1', blueButton1);
作为替代,您可以使用类似以下的插件: https://github.com/goldfire/phaser-webpack-loader