我正在使用檔案加載器 6.2 將靜態影像檔案復制到我的 dist 目標中的影像檔案夾中，并且使用以下配置一切正常（即 svg 從我的 src 檔案夾復制到 dist/images）：
test: /\.(png|jpe?g|gif|svg)$/i,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
publicPath: 'images',
},
但是，除了復制的靜態檔案之外，它還在參考靜態檔案的 dist 檔案夾的根目錄中創建了另一個檔案 - 例如，當我復制一個名為 loading.svg 的檔案時，它會創建該檔案以及一個檔案帶有隨機散列（例如 817e56ed349aea52edfa.svg）
在這個檔案中，它只參考另一個檔案：
export default "images/loading.svg";
如果我然后檢查我編譯的 sass，我可以看到它參考了哈希檔案，而不是復制到影像檔案夾中的資產。
background: url(../817e56ed349aea52edfa.svg) center center no-repeat;
如何停止正在創建的額外檔案，以便它僅直接創建和參考影像檔案夾中的影像？
附帶說明一下，我嘗試將檔案加載器交換為復制 webpack 插件，并且還將檔案復制到影像檔案夾中，但在那種情況下，它沒有參考該檔案，而是還創建了 svg 的哈希版本（但使用實際 svg 內容而不是 webpack 匯出）在根目錄中并參考它 - 所以它可能是其他原因導致這個問題？我在下面包含完整的 webpack 配置，以防任何人發現任何明顯的問題或其他原因導致問題
完整的 webpack 配置
顯示代碼片段
const paths = require("./webpack.paths");
const { VueLoaderPlugin } = require('vue-loader');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require("terser-webpack-plugin");
const isProduction = (process.env.NODE_ENV === 'production');
if (isProduction) {
console.log("Bundling in PRODUCTION mode")
} else {
console.log("Bundling in DEVELOPMENT mode")
}
module.exports = {
entry: {
styles: paths.styles,
home: './vue/templates/home/main.js',
},
mode: isProduction ? 'production' : 'development',
output: {
path: paths.dist,
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
// Use the css-loader to parse and minify CSS imports.
loader: 'css-loader',
options: { sourceMap: true }
},
{
// Use the postcss-loader to add vendor prefixes via autoprefixer.
loader: 'postcss-loader',
options: {
postcssOptions: {
config: paths.postcssConfig,
},
sourceMap: true
}
},
{
// Use the sass-loader to parse and minify CSS imports.
loader: 'sass-loader',
options: { sourceMap: true }
},
],
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
publicPath: 'images',
},
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: "defaults" }],
]
}
},
},
]
},
devServer: {
hot: true,
noInfo: true,
overlay: true,
contentBase: [paths.root],
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
`${paths.dist}/css/*`,
`${paths.dist}/images/*`,
`${paths.dist}/js/*`,
],
}),
new ESLintPlugin({
extensions: ['vue', 'js'],
})
],
optimization: {
minimize: isProduction,
minimizer: [
new TerserPlugin(),
],
runtimeChunk: 'single',
splitChunks: {
minSize: 0,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'all',
test: /[\\/]node_modules[\\/]/,
priority: 10,
enforce: true
}
}
}
}
}
if (isProduction) {
module.exports.plugins = (module.exports.plugins || []).concat([
new CompressionWebpackPlugin(),
])
}uj5u.com熱心網友回復：
最后看起來好像是 css 加載器導致了問題 - 所以我將它配置為忽略 url，然后從檔案加載器插件更改為 copy-webpack-plugin 以復制影像：
使用 css 加載器忽略 url
MiniCssExtractPlugin.loader,
{
// Use the css-loader to parse and minify CSS imports.
loader: 'css-loader',
options: {
sourceMap: true,
url: false,
}
},
復制 webpack 插件來復制圖片
const CopyPlugin = require("copy-webpack-plugin");
plugins: [
new CopyPlugin({
patterns: [
{
from: 'vue/images', // src location
to: 'images', // destination location in dist folder
},
],
options: {
concurrency: 100,
},
}),
]
然后在我的 css 中，我可以將影像作為從 dist 檔案夾 css 到 dist 檔案夾影像檔案夾的相對參考：
background-image: url(../images/loading.svg);
對我來說似乎有點奇怪，為了不獲得額外的 svg 檔案，我不得不這樣做，所以如果有人提出更好的解決方案或知道如何不創建額外的檔案，請隨時回答
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/358417.html
標籤：javascript 网络包 静态文件 webpack-文件加载器