Question

我正在面对这个问题，我花了整整两天的时间。请帮忙。如果这不是webpack的工作方式或获得支持的方式，我将不胜感激任何线索，解决方案或澄清。

我有2个项目： 1. consumer 2. dependency

这两个都是使用webpack捆绑的基本es6模块。

dependency模块是一个可重用模块，旨在供其他模块重用。 consumer模块使用dependency模块作为npm依赖项。

dependency模块附带了一个组件具有自己的图像资产的组件（该组件也是从js导出的（es6））。捆绑输出直接在生成的js中使用正确的导入地址直接在'dist'输出目录中生成了图像资产以及生成的js。一切都很好。

consumer模块使用dependency。 consumer生成的捆绑包正确标识了dependency捆绑包并将其包括在内。

但是，问题是，由dependency模块导出/捆绑的图像不容易包含在consumer的捆绑包中并且在以consumer的配置执行webpack时，未包含/复制到为图像资产指定的相关文件夹（在文件加载器配置中）。

依赖性 /src/index.js

import anyImage from './img/any.jpg'; // image any.jpg available at this path

const foo = function() {
    return "hello!";
};

export {foo, anyImage};

依赖性 /webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
        libraryTarget: 'umd'
    },

    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]"
                        }
                    }
                ]
            },
            {
                test: /\.js?$/,
                loader: 'babel-loader'
            }
        ]
    }
};

消费者 /src/index.js

import {foo, anyImage} from "dependency";
import placeholderImage from './img/placeholder_350x150.png';

document.getElementById('placeholderImage').src = placeholderImage;

setTimeout(() => {
    document.getElementById('placeholderImage').src = anyImage;
}, 2000);

消费者 /webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-widget.js',
        libraryTarget: 'umd'
    },

    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            publicPath: "/dist/"
                        }
                    }
                ]
            },
            {
                test: /\.js?$/,
                loader: 'babel-loader'
            }
        ]
    }
};

谢谢！

Answer 1

我认为您可以在'consumer / src / index.js'和'dependency / src / index.js'中为anyImage制作控制台日志，我想您会找到答案的。

在消费者项目中导入的'anyImg'只是一个字符串-'/static/img/xxx.png'，而不是访问的图像路径。

将依赖项的映像捆绑到主模块的捆绑包中

1 个答案: