Ошибка при сборе webpack проекта Module build failed (from ../node_modules/file-loader/dist/cjs.js):

После установки в wbpack.config.js - загрузчика file-loader и попытки импорта картинки из исходных файлов в консоле получаю ошибку:

[./assets/json.json] 36 bytes {main} [built] [./assets/webpack-logo.png] 3.36 KiB {main} [not cacheable] [built] [failed] [1 error] [./index.js] 282 bytes {main} [built] [./styles/styles.css] 526 bytes {main} [built]

ERROR in ./assets/webpack-logo.png Module build failed (from ../node_modules/file-loader/dist/cjs.js): D:\Study\Code\Webpack\webpack-2020\node_modules\file-loader\node_modules\loader-utils\lib\parseString.js:1 (function (exports, require, module, __filename, __dirname) {

SyntaxError: Invalid or unexpected token at new Script (vm.js:88:7) ...

@ ./index.js 4:0-52 6:42-53 Child HtmlWebpackCompiler: 1 asset Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0 [../node_modules/html-webpack-plugin/lib/loader.js!./index.html] 749 bytes {HtmlWebpackPlugin_0} [built] npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! [email protected] dev: webpack --mode development npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the [email protected] dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Andrey\AppData\Roaming\npm-cache_logs\2020-09-11T20_34_35_884Z-debug.log

//webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
  cache: false,
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: {
      main: './index.js',
      analytics: './analytics.js',
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: './index.html',
    }),
    new CleanWebpackPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpe?g|svg|gif)$/,
        use: [{
          loader: 'file-loader',
        },]
      }
    ]
  }
};

//entry:

import Post from './Post'; 
import './styles/styles.css';
import json from './assets/json.json';
import WebPackLogo from './assets/webpack-logo.png';

let post = new Post('Webpack Post Title', WebPackLogo);

console.log('Post to string', post.toString());
console.log(json);

Ответы (0 шт):