在Angular V5 Webpack教程的“生产构建问题(img标签错误)”中,我们可能会遇到在生产构建中无法正确加载图片的问题。以下是一个可能的解决方法,包含代码示例:
打开webpack.prod.js
文件,可以在项目根目录下的config
文件夹中找到。
在该文件中,找到module.exports
对象中的output
属性,并确保publicPath
属性的值被正确设置为./
。例如:
output: {
// ...
publicPath: './',
// ...
}
module.exports
对象中的module
属性,并添加一个新的规则,用于处理图片文件。例如:module: {
rules: [
// ...
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets/images/'
}
}
]
}
]
}
上述规则使用file-loader
来处理图片文件,将图片文件复制到assets/images/
目录下,并保持原始的文件名和扩展名。
webpack.prod.js
文件并重新运行生产构建命令,例如ng build --prod
。通过以上步骤,你应该能够在生产构建中正确加载图片,并且图片文件会被复制到正确的目录中。