Шаблон мопса «Неожиданный экспорт токена» в файле png / изображения (настройка веб-пакета) - PullRequest
Новая
       7

Шаблон мопса «Неожиданный экспорт токена» в файле png / изображения (настройка веб-пакета)

0 голосов
/ 19 января 2020

Я пытаюсь экспортировать настройки веб-пакета из компоновщика попутного ветра, но я обнаружил некоторые проблемы с загрузкой изображений и добавлением их в мой файл веб-пакета, вот пример ошибки: 

ERROR in ./src/index.pug
Module build failed (from ./node_modules/extract-loader/lib/extractLoader.js):
/mnt/d/Projects/frontend/src/assets/placeholders/pictures/logo.png:1
export default __webpack_public_path__ + "/images/logo.c2db8adaec89fa0ba3010e072f55417b.png";
^^^^^^

SyntaxError: Unexpected token 'export'

Вот мой конфиг веб-пакета: 

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path');

const PATHS = {
    src: path.join(__dirname, './src'),
    dist: path.join(__dirname, './dist'),
    assets: 'assets'
}

module.exports = {
    plugins: [
        new MiniCssExtractPlugin()
    ],
    entry: {
        script: './src/assets/scripts/index.js',
        styles: './src/tailwind/tailwind.css',
        pug: './src/index.pug',
    },
    output: {
        path: path.resolve(__dirname, 'tmp'),
        filename: "[name].bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        hmr: process.env.NODE_ENV === 'development',
                    },
                    },
                    'css-loader',
                    'postcss-loader',
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: "file-loader?name=/images/[name].[hash].[ext]"
            },
            {
                test: /\.pug$/,
                use: [
                    "file-loader?name=[path][name].html",
                    "extract-loader",
                    "html-loader",
                    "pug-html-loader"
                ]
            },
        ]
    },
}

Я следую учебному пособию здесь , но опускаю приложение посредника, действительно не знаю, где я go ошибся.

вот также пример импорта изображения на шаблон мопса в этом случае index.pug: 

img(src="./assets/placeholders/pictures/logo.png" alt="" class="h-32 md:h-48 max-w-xxs md:max-w-sm mx-auto mb-4 md:mb-12" )
...