Путь к изображению в Webpack - PullRequest
Новая
       14

Путь к изображению в Webpack

1 голос
/ 12 июня 2019

Я кодировал свой сайт с помощью Webpack.Все работает, кроме пути изображения.Я привык писать ../img/test.png для его работы.Я исследовал другие вопросы, но ни один не работает.

Мои файлы расположены в папке dist темы WordPress.

Вот мои webpack.config.js: 

module.exports = {
    mode: 'development',
    entry: [
        './src/index.js'
    ],
    devtool: "source-map", // any "source-map"-like devtool is possible
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test:/\.(s*)css$/,
                use: [{
                    loader: "style-loader", options: {
                        sourceMap: true
                    }
                }, {
                    loader: "css-loader", options: {
                        sourceMap: true
                    }
                }, {
                    loader: "resolve-url-loader", //resolve-url-loader needs to come *BEFORE* sass-loader
                    options: {
                      sourceMap: true
                    }
                },{
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }
                }]
            }
        ]
    },
    plugins: [
        new CopyWebpackPlugin([
            {from:'assets/images',to:'images'} 
        ])
    ],
    watch: true,
    output: {
        path: path.resolve(__dirname, 'dist'),  
        filename: 'bundle.js'
    }
};

Я пробовал другие url-загрузчики, но, похоже, ничего не работает.Заранее спасибо.

1 Ответ

1 голос
/ 12 июня 2019

Я понял это. Публичность и путь выхода были самыми важными вещами, которые я должен был изучить. Так как это было с Wordpress, других ответов было недостаточно. Новый конфиг выглядит так: 

const webpack = require('webpack');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: [
        './src/index.js'
    ],
    devtool: "source-map", // any "source-map"-like devtool is possible
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'images',
                        publicPath: 'wp-content/themes/{{ THEME NAME }}/dist/images',
                    },
                  },
                ],
            },
            {
                test:/\.(s*)css$/,
                use: [{
                    loader: "style-loader", options: {
                        sourceMap: true
                    }
                }, {
                    loader: "css-loader", options: {
                        sourceMap: true
                    }
                }, {
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }
                }]
            }
        ]
    },
    watch: true,
    output: {
        path: path.resolve(__dirname, 'dist'),  
        filename: 'bundle.js'
    }
};

Надеюсь, это поможет всем, кто работает через это.

...