express - 使用 webpack-dev-middleware 时如何在移相器应用程序中加载图像？

Question

我有 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');

我尝试包含在我的移相器代码中的每个静态文件上都有相同的错误。

网络包配置:

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 应用程序工作正常。但是每次做一些更改都重新构建项目太烦人了。

Answer 1

如果您首先导入 Assets ，Webpack 将解析您的包中的路径。然后你可以像这样在Phaser中加载它:

import blueButton1 from '../assets/ui/blue_button02.png'
this.load.image('blueButton1', blueButton1);

作为替代方案，您可以使用如下插件:
https://github.com/goldfire/phaser-webpack-loader