Задать вопрос
@svm2001

Как сделать совместимость сборки pug+webpack на linux и windows?

Проблема: Сборка запускается в режиме dev нормально на linux и windows. Но билдится нормально только на linux. На windows в тегах script и link вместе стандартного разделителя папок "/" идет символ "%5С". По сути это тоже самое, но стили и js не подтягиваются к итоговому html.

Должно быть 6528ed919f62e533960438.jpeg

А выходит 6528ed9d87d3c026077118.jpeg

вебпак конфиг ниже. хелп

const path = require('path'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    FileManagerPlugin = require('filemanager-webpack-plugin'),
    MiniCssExtractPlugin = require('mini-css-extract-plugin'),
    CssMinimizerPlugin = require("css-minimizer-webpack-plugin"),
    ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'),
    TerserPlugin = require("terser-webpack-plugin"),
    isProd = process.env.npm_lifecycle_event !== 'dev',
    needContentHash = false,
    baseLibs = ['device', 'hystmodal'],
    includeHtml = pages => {
        return pages.map(page => {
            return new HtmlWebpackPlugin({
                template: path.join(__dirname, page.path),
                filename: `${page?.folder ? `${page.folder}/` : ''}${page.name}.html`,
                chunks: ['main', ...baseLibs, ...page.chunk],
                inject: true,
                minify: false,
            })
        })
    },
    pages = [
        {
            name: 'index',
            path: 'dev/pages/index/index.pug',
            chunk: ['index'],
        },
        {
            name: 'ui-kit',
            path: 'dev/pages/ui-kit/ui-kit.pug',
            chunk: ['ui-kit'],
        },
        {
            name: 'pages',
            path: 'dev/pages/pages/pages.pug',
            chunk: ['pages'],
        },
        {
            name: 'components',
            path: 'dev/pages/components/components.pug',
            chunk: ['components'],
        },
        {
            name: 'home',
            path: 'dev/pages/home/home.pug',
            chunk: ['home'],
        },
        {
            name: 'index',
            path: 'dev/pages/lk/index.pug',
            folder: 'lk',
            chunk: ['index-lk'],
        },
    ],
    localPath = {
        localLibs: 'dev/assets/scripts/local-libs',
        scripts: 'dev/assets/scripts',
        pages: 'dev/pages'
    }

module.exports = {
    mode: isProd ? 'production' : 'development',
    entry: {
        device: path.join(__dirname, localPath.localLibs, 'device.min.js'),
        hystmodal: path.join(__dirname, localPath.localLibs, 'hystmodal.min.js'),

        main: path.join(__dirname, localPath.scripts, 'main.js'),
        
        index: path.join(__dirname, localPath.pages, 'index', 'index.js'),
        'ui-kit': path.join(__dirname, localPath.pages, 'ui-kit', 'ui-kit.js'),
        pages: path.join(__dirname, localPath.pages, 'pages', 'pages.js'),
        components: path.join(__dirname, localPath.pages, 'components', 'components.js'),

        home: path.join(__dirname, localPath.pages, 'home', 'home.js'),
        'index-lk': path.join(__dirname, localPath.pages, 'lk', 'index.js'),
    },
    output: {
        path: path.join(__dirname, 'build'),
        filename: path.join('assets', 'scripts', `${ needContentHash ? '[name].[contenthash].js' : '[name].js' }`),
        hashFunction: `sha256`,
    },
    resolve: {
        alias: {
            '@': path.join(__dirname, './dev'),
        },
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader',
                options: {
                    root: path.resolve(__dirname, './dev'),
                    minimize: false,
                    pretty: true,
                },
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: path.join('assets', 'images', `${ needContentHash ? '[name].[contenthash][ext]' : '[name][ext]' }`),
                },
            },
            {
                test: /\.svg$/,
                type: 'asset/resource',
                generator: {
                    filename: path.join('assets', 'icons', `${ needContentHash ? '[name].[contenthash][ext]' : '[name][ext]' }`,),
                },
            },
            {
                test: /\.(woff2?|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: `assets/fonts/${ needContentHash ? '[name].[contenthash][ext]' : '[name][ext]' }`,
                },
            },
        ],
    },
    plugins: [
        ...includeHtml(pages),
        new FileManagerPlugin({
            events: {
                onStart: {
                    delete: ['build'],
                },
                onEnd: {
                    copy: [
                        {
                            source: path.join('dev', 'public'),
                            destination: 'build/public',
                        },
                    ],
                },
            },
        }),
        new MiniCssExtractPlugin({
            filename: path.join('assets', 'styles', `${ needContentHash ? '[name].[contenthash].css' : '[name].css' }`),
        }),
    ],
    devServer: {
        watchFiles: path.join(__dirname, 'dev'),
        port: 9000,
        static: [
            path.join(__dirname, 'dev', 'public'),
            path.join(__dirname, 'build'),
        ]
    },
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
            new TerserPlugin(),
            new ImageMinimizerPlugin({
                minimizer: {
                    implementation: ImageMinimizerPlugin.imageminMinify,
                    options: {
                        plugins: [
                            ['gifsicle', { interlaced: true }],
                            ['jpegtran', { progressive: true }],
                            ['optipng', { optimizationLevel: 5 }],
                            ['svgo', { name: 'preset-default' }],
                        ],
                    },
                },
            }),
        ],
    },
}
  • Вопрос задан
  • 33 просмотра
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы