意外[路徑]文件裝載機

對於我的形象定位：/src/assets/bitmap/sample.jpg意外[路徑]文件裝載機

考慮的關鍵配置：

context: resolve('src')

output: { 
    path: resolve('builds/web'), 
    publicPath: '', 
    filename: ifProd('[name].[chunkHash].js', '[name].js') 
},

...

loaders: [ 
    { 
    test: /\.(png|jpg|jpeg)/, 
    loader: 'file-loader?name=[path][name].[ext]?[hash]' 
    } 
]

我我期待輸出的結構如下圖所示：

/builds/web/assets/bitmap/sample.jpg

相反，我得到這樣的：

/builds/web/src/assets/bitmap/sample.jpg

我怎麼知道該文件加載器是輸出路徑必須是相對於/src而不是/？

來源

2016-11-14 Birowsky

你有沒有解決過這個問題？ – pilau

@pilau不記得了。對不起 – Birowsky

謝謝。我想，最後，在2天后，我發現：'file-loader'的'context'選項負責加載器如何構建相對路徑。含義：'context' = src目錄中的根文件夾，從中可以複製生成的生成目錄中的相對路徑。 – pilau

經過2天的反覆試驗（感謝Webpack docs！），我發現有一種方法可以控制文件加載器的輸出，並複製輸出目錄中源目錄的文件結構。這是設置的WebPack context，可每裝載機或每建造，用於文件裝載機：

use: [{ 
    loader: 'file-loader', 
    options: { 
     context: <path>, // The directory to draw relative paths from 
     name: '[path][name].[ext]' 
    }, 
    },

這裏有一個如何使用它的一個例子。比方說，你期望的結果是通過www.website.com/assets/images/user.png

你的項目的文件結構，以加載圖像是：

project/ 
├── src/ 
│ └── assets/ 
│  └── images/ 
│   └── user.png 
└── build/

和期望的結果是：

project/ 
├── src/ 
│ └── assets/ 
│  └── images/ 
│   └── user.png 
└── build/ 
    └── assets/ 
     └── images/ 
      └── user.png

這個配置是：

use: [{ 
    loader: 'file-loader', 
    options: { 
     context: path.resolve(__dirname, 'src') 
     name: '[path][name].[ext]' 
    }, 
    },

而這是因爲你想複製下的文件結構src構建內部文件夾folder。

如果你想從路徑中刪除assets目錄，context值將是：path.resolve(__dirname, 'src/assets')和文件加載器將複製在'SRC /資產的開始，而不是相對路徑，其結果將是：

project/ 
├── src/ 
│ └── assets/ 
│  └── images/ 
│   └── user.png 
└── build/ 
    └── images/ 
     └── user.png

來源

2017-10-25 11:49:12 pilau

意外[路徑]文件裝載機

回答

相關問題