Ошибка при сборе 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);