Question

我使用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加载器，但似乎没有任何效果。预先感谢。

Answer 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'
    }
};

希望这对从事此工作的所有人有所帮助。

Webpack图像路径

1 个答案: