Webpack 图片路径答案

【问题标题】：Webpack Image PathWebpack 图片路径
【发布时间】：2019-10-27 06:35:17
【问题描述】：

我使用 Webpack 对我的网站进行了编码。除了图像的路径外，一切正常。我习惯于写../img/test.png 让它工作。我研究了其他问题，但没有任何效果。

我的文件整理在 wordpress 主题的 dist 文件夹中。

这是我的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-loaders 但似乎没有任何效果。提前致谢。

【问题讨论】：

标签： wordpress webpack node-modules webpack-style-loader

【解决方案1】：

我想通了。公共和输出路径是我必须学习的最重要的东西。由于这是使用 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'
    }
};

希望这对正在解决此问题的任何人有所帮助。

【讨论】：