file-loader在我的build檔案夾中創建了兩個獨立的圖片。其中一個命名正確，并保存在正確的路徑中，另一個命名為[hash].png（這是默認的），并保存在build中，而不是build/images。第二個不正確的檔案是0位元組；這就是被鏈接在build檔案夾中最后的index.html檔案中的那個。我已經定義了outputPath和publicPath，但publicPath似乎并沒有實際作用，不管我在那里放了什么。我是不是誤解了它的作用？
module.exports = {
entry: {
index: './app/main.js'。
vendor: './app/vendor.js'。
},
輸出。{
path: path.resolve(__dirname, './build'),
filename: '[name]. [contenthash].js',
},
模塊。{
規則。[
{
測驗。/.js$/,
排除。[/node_modules/, /api/, /tests/, /coverage/]。
使用。'babel-loader
},
{
測驗。/.scss$/,
使用。['style-loader', 'css-loader', 'sass-loader'] 。
},
{
測驗。/.html$/。
使用。'html-loader
},
{
測驗。/. (svg|png|jpg|gif)$/,
使用:{
loader: 'file-loader',
選項。{
name:'[name].[hash].[ext]'。
outputPath: 'images/',
publicPath: 'images/'
}
}
},
]
},
插件。[
new HtmlWebpackPlugin({ template: './app/index.html' }),
new CleanWebpackPlugin()
]
};
最終的html中的圖片鏈接：
<img src="465107fe07e3ec18a463. png">。
另一個有同樣問題的帖子也沒有得到任何答案。 Webpack，我試圖使用檔案加載器來加載圖片，但每當我運行構建時，我得到2張圖片，而不是1張，而且鏈接到html檔案的那張圖片是錯誤的
。uj5u.com熱心網友回復：
我最終弄明白了。從Webpack 5.0開始，這種情況根本不需要安裝加載器就可以處理。因此，檔案加載器、url加載器、原始加載器等現在都已經過時了。
https://webpack.js.org/guides/asset-modules/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/309080.html
標籤：
上一篇：HTML5中的文本包裝