Question

在我的Angular模板中间某处我有img标签：

<img src="../../images/error.gif" />

到目前为止，我正在使用raw-loader这个简单的配置：

   test: /\.html/,
   loader: 'raw'

但在我读完之后我决定需要改变：

raw-loader应该将文本文件转换为CommonJS模块将文件内容导出为字符串 - 仅此而已。

我做了什么改变：

所以我根据this article和this question将我的raw-loader更改为html-loader。

    {
    test: /\.html$/,
    loader: [
        "html?" + JSON.stringify({
            attrs: ["img:src", "img:ng-src"]
        })
     ]
    }

这就是：装载机

{ test: /.gif$/, loader: "file" }

根据this和this个问题，我将publicPath: "/assets"添加到了我的webpackconfig中。并更改了img

上的<img src=" { require('/assets/logo.png') } " />代码

我的webpackconfig如下所示：

webpack({
    entry: path.resolve(__dirname, './main.js'),
        output: {
            path: dir_dist,
            filename: 'custom-shared-lib.js',
            publicPath: "/assets"
        },
    module: {
        preLoaders: [
            {
                test: dir_bin,
                loader: path.resolve(__dirname, "./my-loader.js"),
                query: JSON.stringify(preLoaderQuery)
            },
        ],
        loaders: loader
    },
    plugins: [
        // Avoid publishing files when compilation fails
        new webpack.NoErrorsPlugin()
    ],
}, function(err, stats) {
    console.log(stats.toString());
});

虽然变量加载器是：

[
    {
        test: /\.js$/,
        include: [dir_bin, dir_src],
        loader: 'babel-loader',
        query: {
            presets: ['es2015']
        }
    },
    {
       test: /\.html$/,
       loader: [
        "html?" + JSON.stringify({
            attrs: ["img:src", "img:ng-src"]
        })
      ]
    },
    { test: /.gif$/, loader: "file" }
]

错误：

编译时发生此错误：

找不到模块：错误：无法解析＆＃39;文件＆＃39;或者＆＃39;目录＆＃39; ./ { 要求（＆＃39; /assets/error.gif'）}

我很乐意接受任何建议。

Webpack在HTML中加载图像

0 个答案: