загрузка файлов css url() в определенную папку с помощью веб-пакета

Я использую библиотеку узлов, внутри которой есть файл css, этот файл css загружает изображение, подобное этому

background-image: url("image.png");

Файл "image.png" запрашивается по адресу http://localhost:9000/ (корень), грязный для иметь изображения по всему корню проекта.

Также у меня есть другая проблема, я не знаю, почему файл изображения модуля не копируется в папку сборки автоматически, работает только если я копирую файл изображения вручную в папку сборки. Играя с параметрами конфигурации Webpack, я заработал функцию копирования изображений в корень, но она присваивает им случайные имена, и я не хочу, чтобы они были в корне.

Я хочу, чтобы все загруженные изображения копировались в подпапку «img» внутри папки сборки с их исходными именами файлов и запрашивались там, чтобы корень не был грязным со всеми файлами.

Это мой файл конфигурации веб-пакета:

var webpack               = require('webpack');
var WebpackNotifierPlugin = require('webpack-notifier');

"use strict";
module.exports = {
    entry:   "./source/typescript/Main.ts",
    output: {
        filename: "./js/bundle.js"
    },
    devtool: "inline-source-map",
    devServer: {
        contentBase: ".",
        host: "localhost",
        port: 9000,
        open: true
    },
    module: {
        rules: [
            {
                test:/\.(s*)css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            url: false
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: "source-map-loader"
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|otf|woff|woff2|json|xml|ico)$/,
                use: [{loader: 'file-loader'}]
            },
            {
                test: /\.(csv|tsv)$/,
                use: [{ loader: 'csv-loader' }]
            },
            {
                test: /\.exec\.js$/,
                use: [{ loader: 'script-loader' }]
            },
            {
                test: require.resolve('jquery'),
                use:
                [
                    {
                        loader: 'expose-loader',
                        options: 'jQuery'
                    },
                    {
                        loader: 'expose-loader',
                        options: '$'
                    }
                ]
            }

        ]
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ]
    },
    plugins: [
        new WebpackNotifierPlugin({excludeWarnings: true}),
        //new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}) // Uncoment to minify bundle
    ]
};

person fermmm    schedule 01.12.2017    source источник
comment
В конфигурации вашего веб-пакета вы используете url-loader?   -  person François Romain    schedule 01.12.2017
comment
Нет, я не использую url-loader.   -  person fermmm    schedule 01.12.2017
comment
Я имел в виду url-loader извините   -  person François Romain    schedule 01.12.2017
comment
извините за ошибку, я отредактировал комментарий Нет, я не использую url-loader   -  person fermmm    schedule 01.12.2017
comment
url-loader похож на file-loader, но если файл достаточно мал, его можно закодировать и встроить. Таким образом, у вас больше нет проблем с путями. Для пути проблема, вы можете попробовать добавить ключ path в свой ouput: webpack .js.org/configuration/output/#output-path   -  person François Romain    schedule 01.12.2017
comment
Можете ли вы объяснить, что делает ключ пути и как он собирается решить проблему? Я ничего не могу найти об этом.   -  person fermmm    schedule 01.12.2017


Ответы (1)


Я решил проблемы:

Параметры «outputPath» и «name» можно использовать, чтобы указать веб-пакету скопировать все файлы изображений в определенную папку в папке сборки и с определенным правилом имени. Итак, я решил проблемы следующим образом:

1) Решение для файлов, скопированных в корень со случайными именами файлов: я изменил файл конфигурации веб-пакета, чтобы сообщить веб-пакету, что любое загруженное изображение должно быть скопировано в папку сборки внутри подпапки img с их оригинальное название. Это делается в опциях загрузчика файлов с помощью параметров «outputPath» и «name».

2) Решение проблемы с копированием файлов изображений в папки сборки: удалено «url: false» в загрузчике css, так что теперь пути управляются загрузчиком css. (Поведение по умолчанию). Первоначально я установил эту опцию, потому что не понимал, как css-loader разрешает URL-адреса, поэтому я отключил эту функцию, потому что она выдавала некоторые ошибки. Теперь я понял, что пути css url() относятся к корню проекта, начиная с /, например: url("/img/my-image.png"); Это помешало веб-пакету скопировать файлы изображений в папку сборки.

Теперь все работает, моя окончательная конфигурация загрузчиков веб-пакета такова:

    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|svg|ico)$/,
                loader: 'file-loader',
                query:{
                    outputPath: './img/',
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.(eot|ttf|otf|woff|woff2|json|xml)$/,
                loader: 'file-loader',
                query:{
                    outputPath: './fonts/',
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.(json|xml)$/,
                loader: 'file-loader',
                query:{
                    outputPath: './data/',
                    name: '[name].[ext]?[hash]'
                }
            },
            {
                test: /\.(s*)css$/,
                use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }]
            },
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                loader: "source-map-loader"
            },
            {
                test: /\.(csv|tsv)$/,
                use: [{ loader: 'csv-loader' }]
            },
            {
                test: /\.exec\.js$/,
                use: [{ loader: 'script-loader' }]
            }           
        ]
    }
person fermmm    schedule 01.12.2017