Question

树形结构深处有一个HTML文件。它有这条线：

<img src="../../images/call.svg">

如何在不使用长路径的情况下告诉Webpack在images文件夹中查找此文件？我需要位于树中任何位置的任何HTML文件中的任何img元素才能解析为images文件夹，以便我可以创建类似的内容：

<img src="images/call.svg">

这是我的配置文件：

＆＃13;

var path = require('path');
module.exports = {
	entry: './src/app.js',
	output: {
		path: './dist',
		filename: 'bundle.js'
	},
	module: {
		loaders: [
			{ 
				test: /\.html$/, 
				loader: "html-loader" 
			},
			{
				test: /\.(jpe?g|png|gif|svg)$/i,
				loader: 'url'
			}
		]
	}
};

＆＃13;

Answer 1

在webpack配置中使用htmlLoader属性，可以将根属性传递给html-loader，并使用根相对路径。然后，相对路径将附加到此根属性以解析绝对路径。

例如，如果要提供相对于src目录的路径：

var path = require('path');
module.exports = {
    entry: './src/app.js',
    output: {
        path: './dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { 
                test: /\.html$/, 
                loader: "html-loader" 
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loader: 'url'
            }
        ]
    },
    htmlLoader: {
        root: path.resolve(__dirname, 'src')
    }
};

然后您可以提供相对于src目录的路径，例如：

<img src="/images/call.svg">

注意路径前面的前导/ ，这就是你告诉html-loader它是根相对路径的方式，否则它仍将相对于它自己的上下文。

如何解决* url-loader *路径？

1 个答案: