webpack 打包js中的img路径问题

Question

`

  {
                test: /\.js$/,
                exclude: function(path) {
                    // 路径中含有 node_modules 的就不去解析。
                    // var isNpmModule = !!path.match(/node_modules/);
                    // return isNpmModule;
                },
                include: [
                    path.resolve(__dirname, "src/assets/js"),
                ],   // 只去解析运行目录下的 src 和 demo 文件夹
                loader:'babel'
            },
            {test: /\.html$/, loader: "html" },
            {
                test: /\.(png|jpg)$/,
                loader: 'file-loader',
                query: {
                    /*
                     *  limit=10000 ： 10kb
                     *  图片大小小于10kb 采用内联的形式，否则输出图片
                     * */
                    limit: 10000,
                    name: 'img/[name]-[hash:8].[ext]'
                }
            },
            我的loader是这么配置的  在html里的图片路径是没有问题 
            而实际开发中 可能会需要js动态替换路径的问题  
            这种情况是需要怎么配置呢  感觉我的做法似乎不对 
            有实际这种需求的 帮我解答下 不胜感激 
        

`

Answer 1

https://webpack.github.io/doc...

最后我找到了这个答案 不知道这样的做法是不是主流

Answer 2

写成：

obj.src = require('../../../img/icon-qr.png');

试试吧

Answer 3

到时候用变量替换啊。 一般就是从接口获取JSON，然后得到图片路径和名称，把这个作为参数赋值给相应的变量。

Answer 4

又是动态的问题。之前有听说过，可以让webpack根据变量可能出现的值来打包可能会用到的图片，不过我没实践过。

如果可能用到的图片不多，比如说三四张这样，可以先用变量（require图片后得来的图片真实路径）存起来，然后再根据实际需要把变量填到<img>上。类似下面这样：

var imgs['A'] = require('./img/imgA.jpg');
var imgs['B'] = require('./img/imgB.jpg');
var imgs['C'] = require('./img/imgC.jpg');