模塊解析失敗：意外字符

Question

使用完后：

npm run build

我收到此錯誤：

我的webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },

    ]
  },
  entry: './app/game/index.js',
  output: {
    filename: 'main.js',
    path: __dirname + "/src/main/resources/static"
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new CopyPlugin([
      { from: './app/assets', to: './assets' },
    ])
  ]
};

我的IdeaProjects \\ Flood \\ floodproject \\ app \\ game \\ index.js：

import MainMenu from './main-menu';
import FloodSinglePlayer from './flood-single-player';
import FloodMultiPlayer from './flood-multi-player';
import canvas from './canvas.css';
import body from './back.css';

let wratio = window.innerWidth / window.innerHeight;
let w = window.innerWidth;
let h = window.innerHeight;
let ratio = 4 / 3;
if (wratio < ratio) {
    w = Math.min(800, w) + "px";
    h = (w / ratio) + "px";
} else {
    h = Math.min(600, h) + "px";
    w = (h * ratio) + "px";
}

var config = {
    type: Phaser.WEBGL,
    //width: canvas.width;
    //class: "canvas",
    width: 800,
    height: 600,
    pixelArt: true,
    parent: 'phaser-example',
    scene: [ MainMenu, FloodMultiPlayer, FloodSinglePlayer ],
};
window.onload = () => {
    var can = document.querySelector("canvas");
    can.id = "canvas";
}
//div.innerHTML = as;
//document.getElementsByTagName("body")[0].appendChild(div);*/
var game = new Phaser.Game(config);

我的C：\\ Users \\ chote \\ IdeaProjects \\ Flood \\ floodproject \\ app \\ assets \\ games \\ background \\ back.css：

body { 
    background-image: url(../assets/games/background/background.png);
    background-position: left bottom; 
    background-repeat: repeat;
}

我的package.json：

    "dependencies": {
    "phaser": "^3.18.1",
    "style-loader": "^1.0.0",
    "webpack-merge": "^4.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/preset-env": "^7.5.4",
    "babel-loader": "^8.0.6",
    "copy-webpack-plugin": "^5.0.3",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^5.0.0",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  }

我該如何解決該錯誤？ 我應該更改webpack.config.js嗎？ 我不認為我聲明了錯誤的路徑。

Answer 1

修改您的Webpack配置並為圖像設置文件加載器。 像這樣：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
  module: {
    rules: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpe?g|gif)$/,
        include: /images/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
              publicPath: 'images/'
            }
          }
        ]
      },
    ]
  },
  entry: './app/game/index.js',
  output: {
    filename: 'main.js',
    path: __dirname + "/src/main/resources/static"
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new CopyPlugin([
      { from: './app/assets', to: './assets' },
    ])
  ]
};