Webpack 图片路径

Question

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

我的文件组织在 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-loader，但似乎没有任何效果。提前致谢。

Answer 1

我明白了。 public 和输出路径是我必须学习的最重要的东西。由于这是与 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'
    }
};

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

Webpack 图片路径

Webpack Image Path

wordpress

node-modules

webpack

webpack-style-loader