Module parse failed: Unexpected character

Question

After i used:

npm run build

i got this error:

cmd error message

My 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' },
    ])
  ]
};

My IdeaProjects\Flood\flood-project\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);

My C:\Users\chote\IdeaProjects\Flood\flood-project\app\assets\games\background\back.css :

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

My 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"
  }

How can i fix that error? Should i change webpack.config.js? I'm not think, that i declare wrong path.

you seem to be missing an image loader? So where you are loading css and javascript, you could use a file-loader test for images — Icepickle
– Icepickle, Commented Sep 1, 2019 at 21:34

tom · Accepted Answer · 2019-09-01 21:48:00Z

Modify your Webpack config and set a file loader for images. Something like this:

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' },
    ])
  ]
};

Collectives™ on Stack Overflow

Module parse failed: Unexpected character

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related